在我看来,我有状态列表。
<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的新手。
答案 0 :(得分:2)
我为你做了一个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);
});
答案 1 :(得分:0)
<li ng-style="getColor(*status*)"></li>
在控制器中:
$scope.getColor = function(status) {
return $scope.bad_statuses.indexOf(status) > -1 ? {color: 'red'} : {color: 'green'};
}