Angularjs标记表的行或列取决于值

Angularjs markup table row or colums depends on value

本文关键字：取决于 Angularjs      更新时间：2023-09-26

是否有任何方法可以根据值在行或列上添加类。如果列"anzahl"为空，则行背景色必须为"灰色"，列"anzar"背景色必须变为"红色"。

    <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

您可以在中使用ng-class="{'class': expession}"

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>

谢谢。

这里是我的固定小提琴以及它是如何工作的。

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

小提琴

相关文章：