CODEWITHSUNDEEP
javascriptangularjsng-class
Michael Lewis
Michael Lewis

Reputation: 4302

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?

Upvotes: 20

Views: 24557

Answers (4)

Maxim Kulikov
Maxim Kulikov

Reputation: 731

You should provide ngClass with an array that contains both expression and object:

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

Note: The solution suggested in accepted answer (simultaneous usage of ngClass directive and interpolation in class attribute) is a bad practice. See more details here and here.

Upvotes: 8

Lucia
Lucia

Reputation: 13597

If you need to mix them together, just go for strings concat:

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

Or for a clearer view:

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

There aren't known pros for using class="{{exp}}" instead of ng-class="exp", since both get updated when the value of exp changes. On the contrary, going with the first one might cause page froze in some cases.

Upvotes: 2

Pedro Ara&#250;jo
Pedro Ara&#250;jo

Reputation: 50

I thing you can separate atributes ng-class with ;

try:

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

Upvotes: 0

tymeJV
tymeJV

Reputation: 104795

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

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

Upvotes: 20

Related Questions