Is there any way to add classes on row or column depends on values. If column "anzahl" is null, the row background-color has to be "gray" and the column "anzahl" background-color goes to "red.
<body ng-app ng-init='articles = [
{"id":"1","name":"A&R","type":"P77 ","anzahl":"0"},
{"id":"2","name":"Accuphase","type":"AC5 ","anzahl":"1"},
{"id":"3","name":"Acoustical Systems","type":"Archon","anzahl":"1"}
]'>
<div class="container">
<table class="table">
<tr ng-repeat="article in articles">
<td>{{article.name}}</td>
<td>{{article.type}}</td>
<td>{{article.anzahl}}</td>
</tr>
</table>
</div>
</body>
jsfiddle
Is there any way to add classes on row or column depends on values. If column "anzahl" is null, the row background-color has to be "gray" and the column "anzahl" background-color goes to "red.
<body ng-app ng-init='articles = [
{"id":"1","name":"A&R","type":"P77 ","anzahl":"0"},
{"id":"2","name":"Accuphase","type":"AC5 ","anzahl":"1"},
{"id":"3","name":"Acoustical Systems","type":"Archon","anzahl":"1"}
]'>
<div class="container">
<table class="table">
<tr ng-repeat="article in articles">
<td>{{article.name}}</td>
<td>{{article.type}}</td>
<td>{{article.anzahl}}</td>
</tr>
</table>
</div>
</body>
jsfiddle
Share Improve this question edited Jun 26, 2015 at 17:53 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked Feb 5, 2015 at 6:49 user4420255user44202552 Answers
Reset to default 4You can use ng-class="{'class': expession}" in your case
CSS
.custom-class{
background-color: gray
}
.default-color{
background-color: red
}
<table class="table">
<tr ng-repeat="article in articles" ng-class="{'custom-class': article.anzahl == null, 'default-color': article.anzahl != null}">
<td>{{article.name}}</td>
<td>{{article.type}}</td>
<td>{{article.anzahl}}</td>
</tr>
</table>
Thanks.
Here my fixed fiddle and how does it works.
.custom-class{
background-color: gray
}
.default-color{
background-color: white
}
.warning-class {
background-color: red
}
<table class="table">
<tr ng-repeat="article in articles" ng-class="{'custom-class': article.anzahl === '0', 'default-color': article.anzahl !== '0'}">
<td>{{article.name}}</td>
<td>{{article.type}}</td>
<td ng-class="{'warning-class': article.anzahl === '0', 'default-color': article.anzahl !== '0'}">{{article.anzahl}}</td>
</tr>
</table>
fiddle