Change HTML table cell background color using Angular JS

问题

I am just beginning using Angular JS in my project.

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.

This is the cell:

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

Any help is welcome

回答1:

You should use ng-class : https://docs.angularjs.org/api/ng/directive/ngClass

Example:

css:

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

angular view:

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

EDIT:

Try that first:

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

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

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

EDIT 2:

Now try with :

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

The <td> is red.

来源：https://stackoverflow.com/questions/34552504/change-html-table-cell-background-color-using-angular-js