angularjsangular-ng-ifng-switchangularjs-ng-ifangularjs-ng-switch

angularjs - ngswitch with 4 conditions


I need to write an angular ng-switch with 4 conditions.

Some other answers here on SO suggest using ng-if instead of ng-switch.

And so I tried with the ng-if, but I don't really think this is the best way and I'll explain why:

Basically I need to display 3 different icons, depending on some variables I've got in my scope.

The code in my template is the following:

<div class="buttons">
   <div ng-if="test.mMode==4 && test.kit==4 && test.react.on==true && test.act==1">
      <i class="icon ion-man"></i>
   </div>

   <div ng-if="test.mMode==4 && test.kit==4 && test.react.on==false && test.act==1">
      <i class="icon ion-man"></i>
   </div>

   <div ng-if="zone.iActivity==1">
      <i class="icon ion-man"></i>
   </div>
</div>

Now, this, to me, looks really really messy. And Also, it doesn't work as expected, as it iterates trough all of the if statements printing all the true.

is it possible to do something like the follow instead?

<div class="buttons" ng-switch="test.act && test.Mode && test.kit && test.react.on">
   <div ng-switch-when="1 && 4 && 4 && true">
      <i class="icon ion-man"></i>
   </div>

   <div ng-switch-when="1 && 4 && 4 && false">
      <i class="icon ion-man"></i>
   </div>

   <div ng-switch-when="1"> //I need only the first condition to be true, I don't need the others.
      <i class="icon ion-man"></i>
   </div>
</div>

Or, do you have any other suggestions on how to properly handle this type of templating?

Hope the question is clear enough.

Thanks for any help


Solution

  • A little bit dirty solution would be to use array and toString() method.

    <ng-switch on="[Ex1.x, Ex1.y].toString()">
        <div ng-switch-when="0,true">
          0,true -- jaj
        </div>
        <div ng-switch-when="1,true">
          1,true -- jaj
        </div>
        <div ng-switch-when="2,false">
          2,false -- jaj
        </div>
        <div ng-switch-default>
         default... booo
        </div>
      </ng-switch>
    

    Fiddle: https://jsfiddle.net/r88dhr0w/