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

时间:2014-03-28 19:19:13

标签: javascript angularjs ng-class

以下是使用ng-class指令的两种不同方法。我需要他们两个,在同一个元素上,但那不起作用。

使用ng-class中的对象

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

中的表达式

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

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

有什么建议吗?

4 个答案:

答案 0 :(得分:20)

您不应该使用ng-class作为第二个,请使用

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

答案 1 :(得分:7)

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

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

<强> 注意: 在接受的答案(同时使用ngClass指令和class属性中的插值)中建议的解决方案是一种不好的做法。详情请见herehere

答案 2 :(得分:2)

如果你需要将它们混合在一起,那就去串连:

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

或者更清晰的观点:

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

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

答案 3 :(得分:0)

我认为您可以将属性ng-class;

分开

尝试:

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