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

以下是使用

ng class

指令的两种不同方法。我需要它们，在同一个元素上，但这不起作用

在ng类中使用对象

{{item}

正确的结果是

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

1
2.
3.
4.
5.

---

在ng类中使用表达式

{{item}

正确的结果是

<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>

1
2.
3.
4.
5.

---

现在，把它们一起使用怎么样？ 我需要动态类名（比如

'count-'+n

），但也需要多个类的对象语法

我不能只使用2

ng class

attributes（），只有第一个可以工作

---

有什么建议吗？

对于第二个建议，您不应该使用

ng类

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

我想你可以用
来分离心房
ng级

尝试：

如果需要将它们混合在一起，只需选择字符串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
的值更改时，两者都会更新。相反，在某些情况下，使用第一个可能会导致页面冻结。
您应该为
ngClass
提供一个同时包含表达式和对象的数组：

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



注意：
公认答案中建议的解决方案（同时使用
ngClass
指令和
class
属性中的插值）是一种不好的做法。查看更多详细信息和。
这似乎有效（），这可能是ie8更好的方法这对我不起作用，但这个答案确实起了作用，这似乎有效（），尽管我不确定ie8（不幸的是，plnkr在ie8中不起作用，我没有时间设置和测试它）根据angular docs，建议的解决方案是一种不好的做法：请参阅下面我的答案，了解建议的方法it@MaximKulikov-它没有说在任何地方，它说不要使用插值
{}
与上面显示的语法不同。@tymeJV
{{$index+1}
是一种插值，建议在
class
属性中使用它，同时使用
ngClass
directive@tymeJV引用文档：>不应在class属性的值中使用插值，当在同一个元素上使用ngClass指令时。谢谢，我不知道我们可以在ng类表达式中使用ternaries。
ng-class="'count-' + ($index+1) + ($first?' first':($last?' last':''))"

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

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