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

Question

I need to add multiple conditions ng-class using Angular.js. I am explaining my code below.

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

Here I need to add another two conditions ie-$root.stateName==='app.settings.area' and $root.stateName==='app.settings.area.manageState' with that existing conditions with OR condition.

Answer 1

Use an OR operator || in the evaluated expression:

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

Answer 2

I think this will also work

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

Answer 3

Try with

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

Answer 4

This is one of the blog which helps understanding all possible ways to use conditional ng-class

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