2

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

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299

2 Answers2

4

You 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.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Thanks. I change my fiddle, so it works for me ( http://jsfiddle.net/f3q2jxpj/1/ ) –  Feb 05 '15 at 07:12
  • 1
    Some more good sample for ng-class are here ( http://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression ) –  Feb 05 '15 at 07:14
1

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