Checking for conditions during the loop iteration

Question

Checking for conditions during the loop iteration

I am currently working on an HTML table using AngularJS. Below is the HTML code I have written.

Here is the HTML code snippet:

<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 fetching the data from the myResults object and displaying the values in the table through iteration.

My goal is to highlight specific <td> cells with a color if the value is blank or null during the iteration. For example, if the name and callerID have values but dataPlan is blank, I want to highlight the dataPlan cell in yellow while displaying the values of name and callerID in their own cells.

I am unsure how to implement a conditional check during iteration to highlight the cell with color if the value is blank/null. Any advice or suggestions would be greatly appreciated.

PS: Please note that I intend to fill the cell with a yellow color if the value is blank or null.

html css angularjs

Answer 1

Answer №1

Try using a simple CSS trick to resolve your problem.

Check out the demonstration here: http://jsfiddle.net/U3pVM/34058/

Here is the CSS code:

td:empty {
  background: yellow;
}/*Add specificity for better results*/

Answer 2

Try using a simple CSS trick to resolve your problem.

Check out the demonstration here: http://jsfiddle.net/U3pVM/34058/

Here is the CSS code:

td:empty {
  background: yellow;
}/*Add specificity for better results*/

Answer 3

Answer №2

Here is a recommendation for using conditional statements with ng-style. Give this a try!

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>

Answer 4

Here is a recommendation for using conditional statements with ng-style. Give this a try!

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>

Checking for conditions during the loop iteration

Answer №1

Answer №2

Similar questions

My attempts to integrate PHP into jQuery tabs have been unsuccessful

Retrieve the result set rows and store them in an array as individual objects

What are the steps to create a dynamic Ajax Loading view?

"Utilize JavaScript to extract data from JSON and dynamically generate a

Tips to stop scrolling when clicking on a link in a Vue.js carousel

What is the best way to store items in localStorage within Angular version 4.4.6?

Highlight the menu item when you reach a specific section

Leveraging the power of Bootstrap 4 to place the footer beneath all remaining content on the

What is the best way to smoothly transition in an image that is dynamically set using Angular?

Adjusting the image to fit the container based on its shorter side, regardless of the image's orientation

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

Conceal the item and reveal it upon clicking

What is the best way to interact with both the child and parent controllers within a directive?

The functionality of AngularJS Service / Factory data does not seem to be functioning properly when used in

Try employing an alternative angular controller when working with the bootstrap modal

jQuery 'if' condition not getting detected

Issues with CSS margins in IE causing bugs?

Integrating draw2d into Mean.js: A Step-by-Step Guide

What are some effective ways to implement a real-time tracking system for shipments using Angular JS?

What orientation is best for the back arrow to take in a website written in Arabic?