conditional check while iterating the loop - html

Question

I am working on HTML table with AngularJS. Below is my HTML code.
html code:
<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>
I am returning the value in myResults object and iterating and showing the values in the table.
I want to fill the particular <td> with color if the value is blank or null while iterating, Example) While iterating if i have the values of name and callerID but the dataPlan is blank, i need to fill the dataPlan <td> with yellow color and show the value of name and callerID in its individual cells..
I'm not sure how to include conditional check while iterating the loop and fill the cell with color if the value is blank/null. Any suggestions?
PS: Fill the cell with yellow color if the value in the cell is blank/null.

Answer 1

A quick CSS rule might solve your issue.
Demo: http://jsfiddle.net/U3pVM/34058/
CSS:
td:empty {
background: yellow;
}/*Make it more specific*/

Answer 2

Try this ng-style conditional statements. This will work
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>