Javascript 根据字符串数组更改li元素的颜色

在我看来，我有一个状态列表

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

$scope.statuses

是一组错误状态，例如$scope.bad_statuses[0]=

第一个状态

。如果status存在于

$scope.bad_status

中，我想将其涂成红色，否则为绿色

因此，基本上，我需要检索每个

值，并根据li中的内容是否存在于

$scope.bad_status

数组中的条件，将其涂成绿色或红色

我应该如何处理这个问题？我是安格拉斯的新手

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

---

我为你做了一个扑通一声，这应该有用：）

Javascript代码：

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);
});

---

您可以创建一个ngif表达式来实现这一点。或者使用ngstyle为文本指定颜色。或者您可以使用ng类根据表达式指定不同的类。

错误：[$parse:syntax]语法错误：标记“*”不是从[*status*）]开始的表达式[getColor（*status*）]第10列的主表达式.

您需要将*status*替换为保存状态的字符串或变量。它是一个占位符：）

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

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);
});