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

Answer 1

Convert the boolean to a string:

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

Answer 2

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

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>

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>