Ändern Sie die Farbe von li-Element basierend auf Array von Strings

Question

Meiner Ansicht nach habe ich eine Liste der Status.

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

In meinem Modell Controller retrieve I Status aktualisiert jede Sekunde:

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

$scope.statuses ist ein Array von schlechten Zustände, für example $scope.bad_statuses[0] = FIRST_STATUS. Wenn der Status in $scope.bad_statuses existiert, möchte ich ihn rot färben, ansonsten - grün.

Also im Grunde, irgendwie muss ich jeden <li> Wert abrufen und basierend auf Bedingung, wenn Inhalt von li in $scope.bad_statuses Array existiert, färben Sie es grün oder rot.

Wie soll ich dieses Problem angehen? Ich bin neu bei angularjs.

Answer 1

ich für Sie eine plunkr gemacht, sollte diese Arbeit :)

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

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){ 
       console.log("red"); 
       value.style.color = 'red'; 
       } 
       else{ 
       console.log("green"); 
       value.style.color = 'green'; 
       } 
      }); 

    }, 1000); 
}); 

Answer 2

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

In Controller:

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

Documentation for ng-style directive.