angularjs

Question

我需要写一个有 4 个条件的 angular ng-switch。

SO 上的一些其他答案建议使用 ng-if 而不是 ng-switch。

所以我尝试了 ng-if，但我真的不认为这是最好的方法，我将解释原因：

基本上我需要显示 3 个不同的图标，具体取决于范围内的一些变量。

我的模板中的代码如下：

<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>

现在，对我来说，这看起来真的很乱。而且，它没有按预期工作，因为它遍历所有打印所有 true 的 if 语句。

是否可以改为执行以下操作？

<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>

或者，对于如何正确处理此类模板，您还有其他建议吗？

希望问题够清楚。

感谢您的帮助

Answer 1

有点肮脏的解决方案是使用数组和 toString() 方法。

<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/

angularjs - ngswitch 有 4 个条件

angularjs - ngswitch with 4 conditions

ng-switch

angular-ng-if

angularjs-ng-switch

angularjs-ng-if