CODEWITHSUNDEEP
cssangularjstwitter-bootstrapangularjs-ng-class
Ali-Alrabi
Ali-Alrabi

Reputation: 1698

AngularJS bootstrap class

I have the following angularjs ng-repeat ,column status have three values (Phoned,Active,Waiting) 

 <tr ng-repeat="person in persons">                 
 <td>{{person.id}}</td>
 <td>{{person.status}}</td> 
</tr>

I need to apply bootstrap class depending on the value of status,like the following image

example

Upvotes: 1

Views: 73

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

You need to use ng-class directive

Markup

<tr ng-repeat="person in persons">                 
   <td>{{person.id}}</td>
   <td ng-class="{'phoned':person.status === 'Phoned',
                  'active':person.status === 'Active',
                  'waiting':person.status === 'Waiting'}">
    {{person.status}}
   </td> 
</tr>

CSS

.phoned{
   background-color: blue;
}
.active{
   background-color: green;
}
.waiting{
   background-color: orange;
}

Upvotes: 2

Related Questions