17

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

Isuru
  • 530
  • 3
  • 9
  • 25

5 Answers5

23

Convert the boolean to a string:

<div ng-switch="Item.ItemDetails.IsNew.toString()">
    <div ng-switch-when="true">
deceze
  • 510,633
  • 85
  • 743
  • 889
bruceczk
  • 330
  • 2
  • 4
  • 1
    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. – sumizome Aug 25 '15 at 17:33
  • 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. – Nathan Beck Sep 06 '16 at 15:18
15

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

OddEssay
  • 1,334
  • 11
  • 19
  • 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. – OddEssay Dec 09 '13 at 13:07
  • 4
    Yes OddEasy..without curly braces ng-switch="Item.ItemDetails.IsNew" is worked. Thanks a lot... – Isuru Dec 09 '13 at 13:11
  • 4
    This is a recommendation to use different approach, not an answer to question – Alex Lapa Jan 07 '15 at 00:24
6

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>
Tamas
  • 326
  • 4
  • 9
1

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

vmontazeri
  • 393
  • 2
  • 20
0

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;
    }
}
C.D.
  • 406
  • 1
  • 5
  • 11