conditional check while iterating the loop

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.

you can try this : <td ng-style="data.dataPlan ? color:'yellow':' ' " >{{data.dataPlan}}</td> — Akashii
– Akashii, Commented Sep 25, 2017 at 5:01

K K · Accepted Answer · 2017-09-25 05:10:24Z

2

A quick CSS rule might solve your issue.

Demo: http://jsfiddle.net/U3pVM/34058/

CSS:

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

answered Sep 25, 2017 at 5:10

K K

18.2k4 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aravind Reddy · Accepted Answer · 2017-09-25 06:16:25Z

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>

Collectives™ on Stack Overflow

conditional check while iterating the loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related