Change table background dynamically angularjs - html

Question

How can I change the background of a table cell dynamically in HTML using AngularJS ?
In the following code I want to show a table with a bunch of names and the including status of an object. The status can weather be VALID (green background) or INVALID (red background).
Can this problem be solved in my <td> HTML tag or do I have to move on to 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

You can do this using 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

you can use ng-class
e.x. :
<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>
green-bg and red-bg
are css classes and isValid is property, where you know expression isValid or no

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

It can be solved both in the td tag or/and in your external css.
In Html
<td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
{{object.objectStatus}}
</td>
With external css You can use #oto lolua implementation