Angular ng-switch with boolean

Question

I want to check boolean data with angular ng-switch

this is my code. but it is not working

<div ng-switch={{Item.ItemDetails.IsNew}}>
    <div ng-switch-when="true">
         <p class="new fontsize9 fontWeightBold">NEW</p>
    </div>
 </div>
    <div ng-switch={{Item.ItemDetails.IsFeatured}}>
         <div ng-switch-when="true">
               <div class="featured">
                    <p class="fontWeightBold fontsize8">featured</p>
               </div>
         </div>
     </div>

values of {{Item.ItemDetails.IsNew}} and {{Item.ItemDetails.IsFeatured}} are true or false

Doorn

ng-switch was already expecting an expression, so {{ }} wrapping it was the error here. – Seating

Answer 1

If you are just checking for true values, ng-if seems more appropriate and reduces the need for additional divs containing the code, reducing your sample too:

<div ng-if="Item.ItemDetails.IsNew">
    <p class="new fontsize9 fontWeightBold">NEW</p>
</div>
<div class="featured" ng-if="Item.ItemDetails.IsFeatured">
    <p class="fontWeightBold fontsize8">featured</p>
</div>

Full docs at: http://docs.angularjs.org/api/ng.directive:ngIf

Highboy

If you can't upgrade, ng-show would work as a drop in replacement. - Otherwise, you need to edit ng-switch={{Item.ItemDetails.IsNew}} to ng-switch="Item.ItemDetails.IsNew" (No curly braces, value in quotes)- However, I'm unsure it'll work as switch tends to be aimed at evaluating strings, so a boolean value might be quirky. – Highboy

Yes OddEasy..without curly braces ng-switch="Item.ItemDetails.IsNew" is worked. Thanks a lot... – Doorn

This is a recommendation to use different approach, not an answer to question – Kata

Answer 2

Convert the boolean to a string:

<div ng-switch="Item.ItemDetails.IsNew.toString()">
    <div ng-switch-when="true">

Sirree

This answer doesn't work (ng-switch expects an expression so the handlebars are unnecessary), but the intent of the answer is actually correct and should be the accepted one:ng-switch-when requires a string. If you have a boolean value in your ng-switch test, using toString() to convert it to 'true' or 'false' is the solution. – Refraction

This answer worked for me as well. I needed to use ng-switch to avoid a DOM flickering issue I was having when using two opposite ng-if statements. ng-switch-when="true" used in tandem with ng-switch-default helped resolve it. – Attitudinize

Answer 3

This syntax works for me:

    <div ng-switch="Item.ItemDetails.IsFeatured">
     <div ng-switch-when="true">FEATURED ITEM HTML</div>
     <div ng-switch-default>REGULAR ITEM HTML (not featured)</div>
    </div>

Surinam

Answer 4

You should remove the {{}} from the ng-switch: Change this <div ng-switch={{Item.ItemDetails.IsNew}}> to <div ng-switch=Item.ItemDetails.IsNew>

Noblesse

Answer 5

The attribute value of ng-switch are interpreted as literal string values to match against. (Meaning that cannot be expressions.) For example, ng-switch-when="someVal" will match against the string "someVal" not against the value of the expression $scope.someVal.

If you really have to use ng-switch, it can be forced to semi-use evaluative expressions by the workaround of the .toString() javascript method. Example, using the scope variables numeric 'lastSortIndex' and the boolean 'reverseSorted', plus the AngularJS HTML variable '$index':

<div ng-switch="((lastSortIndex === $index).toString()+(reverseSorted).toString())">
    <div ng-switch-when="truetrue">
        <span class="glyphicon glyphicon-chevron-up">{{ header }}</span>
    </div>
    <div ng-switch-when="truefalse">
        <span class="glyphicon glyphicon-chevron-down">{{ header }}</span>
    </div>
    <div ng-switch-default>{{header}}</div>
</div>

Note the above example is concatenating the booleans together and then evaluating their string contents. Would be better to move this into a callable function that returns a string to be evaluated in the switch-case.

Though I would recommend if possible for you to keep the logic in the logic-controllers area of the code (the javascript files). You can use the ng-html-safe AngularJS directive in combination with their Sanitize feature to call a function in Javascript that switches and returns desired snippets of HTML code for you. Example:

index.html:

<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.13/angular-sanitize.js">
</head>
<body ng-controller="MainController">
<!-- add your other code, like a table code here -->
<div ng-bind-html="HeaderSortIcon(lastSortIndex, $index, reverseSorted, header)">
</div>
</body>

script.js:

var myApp = angular.module('myApp ', ['ngSanitize']);
$scope.HeaderSortIcon = function (lastSortIndex, $index, reverseSorted, header) {
    if (lastSortIndex === $index) {
        if( reverseSorted )
        {
            return '<div><span class="glyphicon glyphicon-chevron-up"></span>' + header + '</div>';
        }
        else{
            return '<div><span class="glyphicon glyphicon-chevron-down"></span>' + header + '</div>';
        }
    }
    else {
        return header;
    }
}

Helminthiasis