AngularJS - Как добавить несколько директив ng-класса?

Вот два разных способа использования директивы ng-class. Мне нужны они оба на одном элементе, но это не работает.

Использование объекта в ng-классе

<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), но также нужен синтаксис объекта для нескольких классов.

Я не могу просто использовать атрибуты 2 ng-class (http://plnkr.co/edit/OLaYke?p=preview), работает только первый.

Любые предложения?

Ответы

Ответ 1

Вы не должны использовать ng-class для второго, используйте

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

Ответ 2

Вы должны предоставить ngClass массив, содержащий как выражение, так и объект:

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

Примечание: Решение, предложенное в принятом ответе (одновременное использование директивы ngClass и интерполяции в атрибуте class), является плохой практикой. Подробнее здесь и здесь.

Ответ 3

Если вам нужно смешать их, просто перейдите к строкам 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. Наоборот, переход с первой может привести к тому, что страница застынет в некоторых случаях.

Ответ 4

Я могу выделить атрибуты ng-class с помощью ;

попробовать:

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