html - 动态更改表格背景angularjs

Question

如何使用 AngularJS 在 HTML 中动态更改表格单元格的背景？

在下面的代码中，我想显示一个表格，其中包含一堆名称和对象的包含状态。状态可以是 VALID (绿色背景)或 INVALID (红色背景)。

这个问题可以在我的<td>中解决吗？ HTML 标记还是我必须继续使用 CSS？

<table border="1">
   <tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td>{{object.objectStatus}}</td> //this background should be colored
   </tr>
</table>

Answer 1

您可以使用 ng-class 执行此操作:

<tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td ng-class="{'red': object.objectStatus === 'invalid', 'green': object.objectStatus === 'valid'}">{{object.objectStatus}}</td> 
</tr>

Fiddle