使用Angular JS

Question

我刚开始在我的项目中使用Angular JS。

我一直在寻找一种方法来改变HTML表格单元格中的背景颜色，具体取决于Angular JS表达式的值，但还没有找到解决方案。

这是单元格：

<td>{{data.material_or_service}</td>

欢迎任何帮助

Answer 1

您应该使用ng-class：https://docs.angularjs.org/api/ng/directive/ngClass

示例：

的CSS：

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

角度视图：

<td ng-class="{'red': (variable == 1), 'blue': (variable ==2)}">{{data.material_or_service}</td>

编辑：

首先尝试：

<div ng-class="{'red' : (test != null)}">
  hey !
</div>

<div ng-class="{'red' : (test == null)}">
  hey 2 !
</div>

并在css中设置.red { background-color: red; }。嘿2应该是红色的。

编辑2：

现在尝试：

<table>
<tr>
<td ng-class="{'red' : (test == null)}">
  hey !
</td>
</tr>
</table>

<td>为红色。