Question

我想在项目点击上应用多个类.active，并根据某些条件应用另一个类。我怎么能两个都做？下面是我拥有的代码，只有MyAnotherClass被应用。

<li ng-class="(item.name == currentState && 'active' && isItemValid(item) && 'myAnotherClass' )" ng-repeat="item in menuItems">
        <a ui-sref="{{item.name}}"  ng-click="selectedItem(item)">{{item.name}}</a> 
</li>

Answer 1

使用ng-class，您可以使用逗号分隔的列表分隔类（及其各自的规则（表达式））。

以下是一个例子：

<li ng-class="{'active': isActive && !isDeleted, 'myAnotherClass': isValidOtherClass}"></li>

此技术应该允许您完成动态应用类的任意组合。

Documentation for ng-class is here

Answer 2

根据ngClass指令文档，使用带有类名称键的对象文字和布尔变量的值来指示添加/删除类。

在v1.2.6中，您似乎可以使用解析为布尔值的表达式代替变量。但是，我还没有测试过功能。

<li ng-class="{ active: item.name == currentClickState, myAnotherClass: isItemValid(item) }" ng-repeat="item in navigationMenuItems">
    <a ui-sref="{{item.name}}"  ng-click="selectedItem(item)">{{item.name}}</a> 
</li>

P.S。看看Logical Operators。对于&&，myAnotherClass仅在前面的每个语句都是真实的时才应用，active将永远不会应用，因为该字符串是真实的并且下一个语句已经过测试。我猜你有意像(item.name===currentClickState ? 'active' :'')+(isItemValid(item) ? 'myAnotherClass' :'')（那是一个Conditional Operator）

在角度中应用多个css类

2 个答案: