AngularJS - How to add multiple ng-class directives?

Question

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?

tymeJV · Accepted Answer · 2014-03-28 19:20:54Z

20

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

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

answered Mar 28, 2014 at 19:20

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Lewis Over a year ago

This seems to work (plnkr.co/edit/OLaYke?p=preview), although I'm not sure about ie8 (and unfortunately plnkr doesn't work in ie8, and I don't have time to set this up and test it)

Maxim Kulikov Over a year ago

According to angular docs suggested solution is a bad practice: docs.angularjs.org/api/ng/directive/ngClass#known-issues See my answer below for recommended way to do it

tymeJV Over a year ago

@MaximKulikov - It doesn't say that anywhere, it says not to use interpolation. {{}} is different than the syntax displayed above.

Maxim Kulikov Over a year ago

@tymeJV {{$index + 1}} is an interpolation, and you suggest to use it in class attribute simultaneously with usage of ngClass directive

Maxim Kulikov Over a year ago

@tymeJV quote from documentation: > You should not use interpolation in the value of the class attribute, when using the ngClass directive on the same element.

|

Maxim Kulikov · Accepted Answer · 2017-06-13 10:49:16Z

8

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.

edited Jun 13, 2017 at 10:49

answered Nov 13, 2016 at 13:24

Maxim Kulikov

7317 silver badges16 bronze badges

Comments

Lucia · Accepted Answer · 2014-09-17 03:36:30Z

2

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.

answered Sep 17, 2014 at 3:36

Lucia

13.7k7 gold badges49 silver badges51 bronze badges

1 Comment

BrDaHa Over a year ago

Thanks, I didn't know we could use ternaries in the ng-class expression.

Pedro Araújo · Accepted Answer · 2014-03-28 19:25:54Z

0

I thing you can separate atributes ng-class with ;

try:

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

answered Mar 28, 2014 at 19:25

Pedro Araújo

502 bronze badges

2 Comments

Michael Lewis Over a year ago

This seems to work (plnkr.co/edit/OLaYke?p=preview), and this might be a better approach for ie8

Immutable Brick Over a year ago

This did not work for me, but this answer did the trick stackoverflow.com/questions/18871277/…

Collectives™ on Stack Overflow

AngularJS - How to add multiple ng-class directives?

Using an object in ng-class

Using an expression in ng-class

Now, how about use them together?

4 Answers 4

6 Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Using an object in ng-class

Using an expression in ng-class

Now, how about use them together?

4 Answers 4

6 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related