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

Change color of li element based on array of strings

本文关键字：li 元素 颜色 字符串 数组      更新时间：2023-09-26

在我的视图中，我有一个状态列表。

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

在我的模型控制器中，我每秒检索更新的状态：

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

$scope.statuses是坏状态的数组，因为example $scope.bad_statuses[0]=FIRST_STATUS。如果状态存在于$scope.bad_statuses中，我想将其涂成红色，否则为绿色。

因此，基本上，我需要以某种方式检索每个<li>值，并根据来自li的内容是否存在于$scope.bad_statuses数组中的条件，将其涂成绿色或红色。

我应该如何处理这个问题？我是angularjs的新手。

我为你做了一个plunkr，这应该可以工作：）

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

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

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

控制器内：

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

ng样式指令的文档。

相关文章：