迭代循環時的條件檢查

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>如果值爲空白或空而迭代，實施例）雖然迭代，如果我有的name和callerID值但dataPlan是空白的，我需要填充dataPlan<td>與黃色，並顯示名稱和callerID在其單個單元格中的值。

我不確定如何在遍歷循環時包含條件檢查，並在值爲空白時填充單元格。有什麼建議麼？

PS：如果單元格中的值爲空白，則用黃色填充單元格。

Answer 1

快速的CSS規則可能會解決您的問題。

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

CSS：

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

Answer 2

試試這個ng-style條件語句。這將工作

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

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