Question

我正在使用AngularJS处理HTML表。以下是我的HTML代码。

html代码：

<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对象中的值，并迭代并显示表中的值。

如果值为空，则我希望用特定的<td>填充颜色，或者在迭代时将其填充为null，示例）迭代时如果我的值为name和callerID但是{ {1}}为空，我需要用黄色填充dataPlan dataPlan并在其各个单元格中显示name和callerID的值。

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

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

Answer 1

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

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

CSS：

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

Answer 2

试试这个ng-style条件语句。这将有效

＆＃13;

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:''}
    ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<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>

＆＃13;

迭代循环时进行条件检查

2 个答案: