Dancia Dancia - 1 year ago 66
AngularJS Question

Change color of li element based on array of strings

In my view I have list of statuses.


In my model controller I retrieve updated statuses each second:

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

is an array of bad statuses, for
example $scope.bad_statuses[0]
. If status exists in
, i want to color it red, otherwise - green.

So basically, somehow I need to retrieve each
value and based on condition if content from li existst in
array, color it green or red.

How should I approach this problem? Im new to angularjs.

Answer Source

I made a plunkr for you, this should work :)


Javascript code:

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){
                 value.style.color = 'red';
                 value.style.color = 'green';

  }, 1000);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download