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

Question

以下是使用该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>

<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),只有第一个属性有效.

有什么建议？

Answer 1

tym*_*eJV 20

您不应该使用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属性中同时使用指令和插值)是一种不好的做法.在这里和这里查看更多细节.