css - AngularJS 引导类

Question

我有以下 angularjs ng-repeat ，列状态有三个值（电话，活动，等待）

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

我需要根据状态的值应用引导类，如下图所示

Answer 1

您需要使用ng-class指令

标记

<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;
}