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

Question

ng-class以下是使用该指令的 2 种不同方式。我需要它们，在同一个元素上，但这不起作用。

在 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），只有第一个有效。

有什么建议么？

score 20 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

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

或者为了更清晰的视图：

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

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

score 0 · Accepted Answer

我觉得你可以ng-class用;

尝试：

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