CODEWITHSUNDEEP
angularjsangularjs-ng-repeatng-class
Simone Sessa
Simone Sessa

Reputation: 873

AngularJS: ng-repeat and ng-class

I've a problem with ng-repeat and ng-class. I want to apply class only if the param "sel" is true. My data is about this: people = [{"id":0,"name":"Simone","sel":true},{"id":1,"name":"Maria","sel":false},{"id":2,"name":"Marco","sel":false}]

In my html page I've:

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{person-select: person.sel == 'true'}">{{person.name}}</span>
</li>

But it doesn't work.. Where I'm wrong? I tried with {{person.name}}-{{person.sel}} and it print "Simone-true .. Maria-false .. Marco-false".

Upvotes: 4

Views: 5580

Answers (3)

amarmishra
amarmishra

Reputation: 613

I know it's an old question but adding on to this. I had to apply CSS from person (from the list) and also needed to add a class conditionally. Here is the syntax for that.

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="[person.someClass, {'person-select': person.sel}]">{{person.name}}</span>
</li>

Here person.someClass is a class from the list and 'person-select' is a conditional class.

Upvotes: 1

squiroid
squiroid

Reputation: 14017

wrap the class name with ' .

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{'person-select': person.sel == 'true'}">{{person.name}}</span>
</li>

Upvotes: 2

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

The first problem with your code is that you are comparing a boolean value with a string.

true == 'true' // will return false

The second problem is that the name of the class is not wrapped in '.

Bellow code fixes both issues:

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="{'person-select': person.sel}">{{person.name}}</span>
</li>

Upvotes: 6

Related Questions