如何使用 Angular.js 在 ng-class 中添加多个条件

【问题标题】：How to add multiple conditions in ng-class using Angular.js如何使用 Angular.js 在 ng-class 中添加多个条件
【发布时间】：2018-01-29 15:03:19
【问题描述】：

我需要使用 Angular.js 添加多个条件ng-class。我在下面解释我的代码。

<li ng-class="{'active':($root.stateName==='app.settings')}"><a ui-sref="app.settings">Settings</a></li>

这里我需要添加另外两个条件i.e-$root.stateName==='app.settings.area' and $root.stateName==='app.settings.area.manageState' 与现有条件OR 条件。

【问题讨论】：

AngularJS ng-class multiple conditions with OR operator的可能重复

标签： javascript angularjs ng-class

【解决方案1】：

在计算表达式中使用 OR 运算符 ||：

<li ng-class="{'active':($root.stateName==='app.settings' || $root.stateName==='app.settings.area.manageState' )}">
    <a ui-sref="app.settings">Settings</a>
</li>

【讨论】：

我确实喜欢这个`
设置

@subhra 既然要满足这么多条件，最好将逻辑保留在控制器中并分配一个变量，以便您的 html 可以评估该变量

【解决方案2】：

我认为这也可以工作

<li ng-class="{'active':($root.stateName==='app.settings' , $root.stateName==='app.settings.area.manageState'  } ">
             <a ui-sref="app.settings">Settings</a>  
              </li>

【讨论】：

【解决方案3】：

试试

`<li ng-class="{'active':($root.stateName==='app.settings' || $root.stateName==='app.settings.area' || $root.stateName==='app.settings.area.manageState' || $root.stateName==='app.settings.area.manageCity' || $root.stateName==='app.settings.vechile' || || $root.stateName==='app.settings.vechile.category' || $root.stateName==='app.settings.vechile.manufacture' || $root.stateName==='app.settings.vechile.model')}">
    <a ui-sref="app.settings.area.manageState">Settings</a>
</li>`

【讨论】：

【解决方案4】：

这是帮助理解使用条件 ng-class 的所有可能方法的博客之一

https://scotch.io/tutorials/the-many-ways-to-use-ngclass

【讨论】：