【问题标题】：AngularJS - How to add multiple ng-class directives?AngularJS - 如何添加多个 ng-class 指令？
【发布时间】：2014-05-08 10:04:57
【问题描述】：

这里有两种不同的方式来使用ng-class 指令。我需要它们，在同一个元素上，但这不起作用。

在 ng-class 中使用对象

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class="{ first: $first, last: $last }">{{item}}</div>

正确的结果

<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>

在 ng-class 中使用表达式

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class=" 'count-' + ($index + 1) ">{{item}}</div>

正确的结果

<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>

我需要动态类名（如'count-' + n），但还需要多个类的对象语法。

我不能只使用 2 个ng-class 属性 (http://plnkr.co/edit/OLaYke?p=preview)，只有第一个有效。

有什么建议吗？

【问题讨论】：

【解决方案1】：

第二个你不应该使用ng-class，使用

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">

【讨论】：

这似乎有效 (plnkr.co/edit/OLaYke?p=preview)，虽然我不确定 ie8（不幸的是 plnkr 在 ie8 中不起作用，我没有时间进行设置和测试它）
根据 angular docs 建议的解决方案是一种不好的做法：docs.angularjs.org/api/ng/directive/ngClass#known-issues 请参阅下面的答案以了解推荐的方法
@MaximKulikov - 它没有说任何地方，它说不使用插值。 {{}} 与上面显示的语法不同。
@tymeJV {{$index + 1}} 是一个插值，您建议在class 属性中同时使用ngClass 指令
@tymeJV 引用自文档：> 在同一元素上使用 ngClass 指令时，不应在类属性的值中使用插值。

【解决方案2】：

我认为你可以将 ng-class 与 ; 分开

尝试：

ng-class=" 'count-' + ($index + 1) ; { first: $first, last: $last }"

【讨论】：

【解决方案3】：

如果您需要将它们混合在一起，只需使用字符串 concat：

ng-class="'count-' + ($index+1) + ($first?' first':($last?' last':''))"

或者为了更清晰的视图：

ng-class="'count-' + ($index+1) + ($first?' first':'') + ($last?' last':'')"

没有已知的专业人士使用class="{{exp}}" 代替ng-class="exp"，因为当exp 的值发生变化时，两者都会更新。相反，在某些情况下，使用第一个可能会导致页面冻结。

【讨论】：

【解决方案4】：

您应该为ngClass 提供一个包含表达式和对象的数组：

<div ng-class="['count-' + ($index + 1), { first: $first, last: $last }]">

注意： 接受的答案中建议的解决方案（同时使用ngClass 指令和class 属性中的插值）是一种不好的做法。查看更多详情 here 和 here。

【讨论】：