use expression as ng-class in angular js

Question

I have unordered list in which I want different different class for each li which will be dynamic.

my code is

$scope.className = ['clr1','clr2','clr3','clr4','clr5'];

My Html :

  <div>
        <ul>
         <li  ng-repeat="item in mainitem"  ng-style="{color: color[$index]}" >
              <span  ng-class="{className [$index]}">{{ item.name}}</span>  // At this line I ahve added dynamic class but its not working
          </li>
        </ul>
   </div>

This is not applied class as per classname array !!

Is there any issue with this code ? Thanks for helping !!

Why not use CSS class with :nth-child(n+1), etc.

Tushar
– Tushar

2018-02-01 07:36:09 +00:00
Commented Feb 1, 2018 at 7:36 — Tushar
– Tushar, Commented Feb 1, 2018 at 7:36
Thanks !! can you pls update with code ?

CodeWithCoffee
– CodeWithCoffee

2018-02-01 07:40:19 +00:00
Commented Feb 1, 2018 at 7:40 — CodeWithCoffee
– CodeWithCoffee, Commented Feb 1, 2018 at 7:40

zabusa · Accepted Answer · 2018-02-01 08:52:12Z

2

you can use [] instead of {}

 <div>
        <ul>
         <li  ng-repeat="item in mainitem"  ng-style="{color: color[$index]}" >
              <span  ng-class="[className[$index]]">{{ item.name}}</span>  
          </li>
        </ul>
   </div>

for example of working see this codepen codepen

edited Feb 1, 2018 at 8:52

answered Feb 1, 2018 at 7:44

zabusa

2,72926 silver badges26 bronze badges

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

7 Comments

zabusa Over a year ago

@CodeWithCoffee i provide a link below

CodeWithCoffee Over a year ago

Its not adding class !!

Mawg Over a year ago

$scope.className = ['clr1','clr2','clr3','clr4','clr5']; - but I don't see any of those classes declared in the CSS in your CodePen

CodeWithCoffee Over a year ago

Hey Thanks its seems working this way !! Thank you very much !!

zabusa Over a year ago

Not provided in CSS but its getting the classes

|

Mawg · Accepted Answer · 2018-02-01 07:46:27Z

0

As the code is posted in the question, you are missing an opening brace when evaluating the class name

<span  ng-class="{className [$index]}">{{ item.name}}</span>

should be

<span  ng-class="{{className [$index]}">{{ item.name}}</span>

when it doesn't evaluate, you will end up with no class at all

answered Feb 1, 2018 at 7:46

Mawg

40.5k110 gold badges334 silver badges582 bronze badges

2 Comments

Mawg Over a year ago

Then there is a second problem (which I will look for). But the error which I pointed out still has to be corrected.

CodeWithCoffee Over a year ago

Yes I missed it !! Although I am using second one itself !! But its not adding class

Collectives™ on Stack Overflow

use expression as ng-class in angular js

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related