Adjust the color of each list item depending on an array of strings

Question

Adjust the color of each list item depending on an array of strings

Within my perspective, I possess a collection of different statuses.

<ul>
    <li>FIRST_STATUS</li>
    <li>SECOND_STATUS</li>
    <li>THIRD_STATUS</li>
</ul>

To continuously update the statuses in my controller model, I use the following function:

    $interval(function () {
            $scope.bad_statuses = Model.getStatuses({id: $scope.someModel.id});
    }, 1000);

The $scope.statuses array contains the list of bad statuses, such as $scope.bad_statuses[0] = FIRST_STATUS. If a status exists within $scope.bad_statuses, I want to color it red; otherwise, it should be green.

In essence, I need to extract each value from the <li> elements and based on whether it is present in the $scope.bad_statuses array, assign either a red or green color.

How would you suggest tackling this issue? I am new to AngularJS.

javascript angularjs

Answer 1

Answer №1

Here is a plunkr that should solve your issue :)

https://plnkr.co/edit/OP66yUB5lxBS5uCmtbRh?p=preview

Check out the JavaScript code below:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $interval) {
  $scope.name = 'World';
  $scope.bad_statuses = ["FIRST_STATUS", "THIRD_STATUS"];
  $interval(function () {
            var lis = document.getElementById("list").getElementsByTagName("li");
            angular.forEach(lis, function(value, key){
               if($scope.bad_statuses.indexOf(value.innerHTML) > -1){
                 console.log("red");
                 value.style.color = 'red';
               }
               else{
                 console.log("green");
                 value.style.color = 'green';
               }
            });

  }, 1000);
});

Answer 2

Here is a plunkr that should solve your issue :)

https://plnkr.co/edit/OP66yUB5lxBS5uCmtbRh?p=preview

Check out the JavaScript code below:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $interval) {
  $scope.name = 'World';
  $scope.bad_statuses = ["FIRST_STATUS", "THIRD_STATUS"];
  $interval(function () {
            var lis = document.getElementById("list").getElementsByTagName("li");
            angular.forEach(lis, function(value, key){
               if($scope.bad_statuses.indexOf(value.innerHTML) > -1){
                 console.log("red");
                 value.style.color = 'red';
               }
               else{
                 console.log("green");
                 value.style.color = 'green';
               }
            });

  }, 1000);
});

Answer 3

Answer №2

<li ng-style="updateColor(*status*)"></li>

In the script:

$scope.updateColor = function(status) {
    return $scope.bad_statuses.indexOf(status) > -1 ? {color: 'red'} : {color: 'green'};
}

Explore more about the ng-style directive here.

Answer 4

<li ng-style="updateColor(*status*)"></li>

In the script:

$scope.updateColor = function(status) {
    return $scope.bad_statuses.indexOf(status) > -1 ? {color: 'red'} : {color: 'green'};
}

Explore more about the ng-style directive here.

Adjust the color of each list item depending on an array of strings

Answer №1

Answer №2

Similar questions

Having trouble with Angular 2 Routing and loading components?

How to format values in a textarea using AngularJS

What is the process for printing with JQuery?

What is the best way to implement a switch that can simultaneously display both the on and off positions?

Ajax sends the URL location to Python

What are the hours available on the Angular DatePicker?

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

Is the for loop programmed to stop at the first match?

Tips for implementing owl carousel in Nuxt.REACT_UNITS_CODIFY

Ensure that only the most recent Ajax request is allowed

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

Encountering difficulties in loading my personal components within angular2 framework

The automated test locator in Angular using Protractor is failing to function

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

`Can't figure out how to input variables into PHP Form`

When fetching data from the API in Angular, the response is displayed as an object

Configuring CORS in an Angular JS controller

The choice between using "npm install" and "npm install -g" for

Unlocking the Power of $http and Stream Fusion

Is there a way to implement multiple "read more" and "read less" buttons on a single page?