ループを反復しながら条件をチェックする

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オブジェクトに値を戻し、反復し、テーブル内の値を示しています。

私は例、反復しながら、値が空白またはnullの場合、色と特定の<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条件文を試してみてください。 ` {{data.dataPlan}}これは、あなたがこれを試すことができ

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>