使用Angular JS更改HTML表格单元格背景颜色 [英] Change HTML table cell background color using Angular JS

问题描述

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

I am just beginning using Angular JS in my project.

我一直在寻找一种方法来根据Angular JS表达式的值更改HTML表格单元格的背景颜色，但尚未找到解决方案.

I have been searching for a way to change the background color from a HTML table cell depending on the value of an Angular JS expression, but haven't found the solution yet.

这是单元格:

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

欢迎任何帮助

推荐答案

您应使用 ng-class :示例:

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>

并设置 .red {background-color:red;} 在CSS中.Hey2应该是红色的.

and set up .red { background-color: red; } in the css. Hey2 is supposed to be in red.

现在尝试:

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

< td> 是红色的.

这篇关于使用Angular JS更改HTML表格单元格背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！