在角度js中使用ng-class分配css类
[英]Assign css class using ng-class in angular js
问题描述
I'm using angularjs and I have data like this : 
我正在使用angularjs，我有这样的数据：
$scope.users = [{
name: "Pratik"
queue: [{number: "199"},{number: "111"}],
status: "OK"
}]
My view : 我的观点 ：
.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>
My problem is that I want to assign the class "available" if the queue array in users contains the number "111" at any index. 我的问题是，如果用户中的队列数组在任何索引处包含数字“111”，我想分配类“可用”。 In the users array the number:"111" may appear at any index so in the view I can't always use user.queue[1].number == 111 or user.queue[1].number == 111 to assign the class. 在users数组中， number:"111"可能出现在任何索引处，因此在视图中我不能总是使用user.queue[1].number == 111或user.queue[1].number == 111来分配班级。 I want a solution which will check if the queue array contains number:"111" and assign the class of available accordingly. 我想要一个解决方案，它将检查队列数组是否包含number:"111"并相应地分配可用的类。 I tried to do it like this : ng-class="{'available': user.queue[i].number == 111}" but it's not working. 我尝试这样做： ng-class="{'available': user.queue[i].number == 111}"但它不起作用。 How do I do it? 我该怎么做？
This my current workaround to apply the class: 这是我目前应用该类的解决方法：
ng-class="{'available': user.queue[0].number == 111 || user.queue[1].number == 111}"
3 个解决方案
解决方案1
1 2018-11-19 07:03:50
To check that condition where 111 appears at any index the easy fix could be to call a function that will check that property in the array and return true or false based on the condition. 要检查111出现在任何索引处的条件，简单的修复可能是调用一个函数来检查数组中的属性并根据条件返回true或false 。 Something like below: 如下所示：
var app = angular.module('myApp', []); app.controller('MainCtrl', ['$scope', function($scope){ $scope.users = [{ name: "Pratik", queue: [{ number: "111" }, { number: "119" }], status: "OK" }, { name: "Pratik123", queue: [{ number: "199" }, { number: "185" }], status: "OK" }]; $scope.checkQueue = function(queue){ return queue.find(({number})=>number === '111'); } }]);
.available { background-color: #00226f; color: #f8f8f8; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MainCtrl"> <div class="col-xs-12 col-sm-3" ng-repeat="user in users"> <span ng-class="{'available': checkQueue(user.queue)}" class="badges ">{{user.name}}</span> </div> </div>
解决方案2
1 2018-11-19 07:07:19
You have to add use ng-repeat to loop all queue and find how has item.number == '111' 你必须添加使用ng-repeat来循环所有队列并找到item.number == '111'
<div class="col-xs-12 col-sm-3" ng-repeat="user in users">
<div ng-repeat="item in user.queue">
<span ng-class="{'available': item.number == '111'}" class="badges ">111</span>
</div>
</div>
NOTE! 注意！
if you want show only the item.number == '111' you can use ng-hide/show 如果你想只显示item.number == '111'你可以使用ng-hide/show
解决方案3
1 已采纳 2018-11-19 07:28:46
try below code snippet 尝试下面的代码片段
can achieve by using lodash js also using _.filter 可以通过使用lodash使用lodash js来_.filter
_.filter(array, { 'number': '111' } )
Ref: https://lodash.com/docs/4.17.11#find 参考： 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.