Mike Lewis Mike Lewis - 23 days ago 11
AngularJS Question

AngularJS - How to add multiple ng-class directives?

Here are 2 different ways to use the

ng-class
directive. I need them both, on the same element, but that doesn't work.

Using an object in 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>


correctly results in

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





Using an expression in 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>


correctly results in

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





Now, how about use them together?



I need dynamic class names (like
'count-' + n
), but also need the object syntax for multiple classes.

I can't just use 2
ng-class
attributes (http://plnkr.co/edit/OLaYke?p=preview), only the first one works.

Any suggestions?

Answer

You shouldn't be using ng-class for the second one, use

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