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

Answer 2

你可以使用ng-class

e.x。：

<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>

green-bg和red-bg 是css类，isValid是属性，你知道表达式isValid或没有

Answer 3

CSS：

.invalid{
background-color:red;
}

.valid{
background-color:green;
}

<强> HTML

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

Answer 4

可以在td标签或/和外部css中解决。

在Html中

     <td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
        {{object.objectStatus}}
      </td>

使用外部css您可以使用@oto lolua实现

动态更改表格背景angularjs

4 个答案: