Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
54
rated 0 times [  59] [ 5]  / answers: 1 / hits: 24571  / 10 Years ago, fri, march 28, 2014, 12:00:00

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?


More From » angularjs

 Answers
186

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



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

[#71722] Thursday, March 27, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
madelyn

Total Points: 449
Total Questions: 100
Total Answers: 100

Location: Seychelles
Member since Fri, May 7, 2021
3 Years ago
madelyn questions
Wed, Jul 28, 21, 00:00, 3 Years ago
Wed, Jul 14, 21, 00:00, 3 Years ago
Sat, Nov 7, 20, 00:00, 4 Years ago
Thu, Sep 3, 20, 00:00, 4 Years ago
;