AngularJS -如何添加多个ng类指令？

Question

以下是使用ng-class指令的两种不同方法。我需要他们两个，在相同的元素，但这是行不通的。

在ng类中使用对象

http://plnkr.co/edit/uZNK7I?p=preview

<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类中使用表达式

http://plnkr.co/edit/tp6lgR?p=preview

<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)，但也需要多个类的对象语法。

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

有什么建议吗？

Answer 1

您不应该在第二次使用ng-class，请使用

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

Answer 2

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

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

注意：--在接受的答案中建议的解决方案(同时使用ngClass指令和class属性中的插值)是一种糟糕的做法。请参阅更多详细信息这里和这里。

Answer 3

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

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

或者为了更清楚的观点：

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

使用class="{{exp}}"而不是ng-class="exp"并没有已知的优点，因为当exp的值发生变化时，两者都会得到更新。相反，在某些情况下，使用第一种方法可能会导致页面冻结。