我正在使用 angularjs 并且我有这样的数据:
$scope.users = [{
name: "Pratik"
queue: [{number: "199"},{number: "111"}],
status: "OK"
}]
我的观点:
.available{
background-color: #00226f;
color: #f8f8f8;
}
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<span ng-class="{'available': user.queue[0].number == 111}" class="badges ">111</span>
</div>
我的问题是,如果用户中的队列数组在任何索引处包含数字“111”,我想分配“可用”类。在用户数组中,number:"111"
可能出现在任何索引处,因此在 View 中我不能总是使用 user.queue[1].number == 111
或 user.queue[1].number == 111
分配类。我想要一个解决方案,它将检查队列数组是否包含 number:"111"
并相应地分配可用的类。
我试着这样做:ng-class="{'available': user.queue[i].number == 111}"
但它不起作用。我该怎么做?
这是我目前应用该类的解决方法:
ng-class="{'available': user.queue[0].number == 111 || user.queue[1].number == 111}"
最佳答案
试试下面的代码片段
可以使用lodash
js实现也可以使用_.filter
_.filter(array, { 'number': '111' } )
引用:https://lodash.com/docs/4.17.11#find
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.findObjectByKey = function(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
};
$scope.users = [{
name: "Pratik",
queue: [{number: "199"},{number: "666"}],
status: "OK"
},
{
name: "Pratik 2",
queue: [{number: "111"},{number: "555"}],
status: "OK 2"
},
{
name: "Pratik 3",
queue: [{number: "999"},{number: "888"}],
status: "OK 3"
}
];
$scope.searcInArray = function(array){
// var obj = $scope.findObjectByKey(array, 'number', '111');
// using loadsh
var obj = _.filter(array, { 'number': '111' } );
return obj.length > 0;
};
}
.available{
background-color: #00226f;
color: #f8f8f8;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<span ng-class="{'available' : searcInArray(user.queue)}" class="badges ">111</span>
</div>
</div>
</body>
</html>
关于javascript - 在angular js中使用ng-class分配css类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53369676/