关于html：迭代循环时的条件检查


conditional check while iterating the loop

我正在和AngularJS一起处理HTML表。下面是我的HTML代码。

HTML代码：

1
2
3
4
5
6
7
<table>
    <tr ng-repeat="data in myResults">
      <td style="text-align: center;">{{data.name}}</td>
      <td style="text-align: center;">{{data.callerID}}</td>
      <td style="text-align: center;">{{data.dataPlan}}</td>
    </tr>
</table>

我返回myResults对象中的值，并迭代并显示表中的值。

我想在迭代时用颜色填充特定的

，如果值为空或为空，例如)在迭代时，如果我有name和callerID的值，但dataPlan为空，我需要用黄色填充dataPlan

，并在其单个单元格中显示名称和被调用方的值。

我不知道如何在循环迭代时包括条件检查，如果值为空/空，则用颜色填充单元格。有什么建议吗？

ps：如果单元格中的值为空/空，则用黄色填充单元格。

相关讨论

快速的CSS规则可以解决您的问题。

演示：http://jsfiddle.net/u3pvm/34058/

CSS：

1
2
3
td:empty {
  background: yellow;
}/*Make it more specific*/

试试这个ng-style条件语句。这会起作用

1
2
3
4
5
6
7
8
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.myResults=[
    { name:'aravind',callerId:'1234',dataPlan:'new'},
    { name:'John',callerId:'2345',dataPlan:'another'},
    { name:'ravi',callerId:'3456',dataPlan:''}
    ];
});
1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">

<table ng-app="myApp" ng-controller="customersCtrl">
    <tr ng-repeat="data in myResults">
      <td style="text-align: center;">{{data.name}}</td>
      <td style="text-align: center;">{{data.callerId}}</td>
      <td ng-style="{'background-color': data.dataPlan ==='' ? 'yellow' : ''}">{{data.dataPlan}}</td>
    </tr>
</table>