javascript - 根据数组值angularjs分配ng-class值
问题描述
我的回复是这样的:
$scope.users = [{
name: 'joseph',
queue:[
{number:'111',status:'Paused'},
{number:'345',status:'Not In Use'},
{number:'342',status:'Not In Use'}],
}];
在我看来,如果响应中的队列数组在任何索引处包含 status = Paused,我将类设置为暂停。我认为我在下面这样做的方式不是正确的方式,因为如果队列数组包含超过 3 个对象,那么我的代码将无法正确分配类。这是我的代码:
<div ng-repeat="user in users>
<span class="badges badges-lg" ng-class="{'paused': user.queue[0].status === 'Paused' || user.queue[1].status === 'Paused' || user.queue[2].status === 'Paused'}">111</span>
</div>
"number":"111"
我想要一个解决方案,仅当对应于队列数组的状态为暂停时才应用暂停的类。我的意思不是user.queue[0].status === 'Paused' || user.queue[1].status === 'Paused' || user.queue[2].status === 'Paused'
我只想要一行代码来检查队列数组中与“数字”相对应的状态:“111”是暂停的。我该怎么做?
解决方案
您可以调用控制器函数ng-class
来动态检查条件并返回您需要的类:
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.users = [{
name: 'joseph',
queue: [{
number: '111',
status: 'Paused'
},
{
number: '345',
status: 'Not In Use'
},
{
number: '342',
status: 'Not In Use'
}
],
}];
$scope.checkPaused = function(user) {
var isPaused = user.queue.find(({
number
}) => number === '111');
if(isPaused){
return 'paused'
}
}
}]);
.paused{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<div ng-repeat="user in users">
<span class="badges badges-lg" ng-class="checkPaused(user)">111</span>
</div>
</div>
推荐阅读
- c# - 从 Azure 计算机视觉 API 提取文本时出错
- reactjs - 反应排除路线
- java - I want visible button has removed it text from TextView
- django - 来自芹菜任务延迟的Keyerror
- php - 使用 Google Optimize A/B 测试进行服务器端重定向
- security - eslint-utils 的安全漏洞,作为 eslint@5.12.0 的依赖项之一添加
- elasticsearch - “模糊”在“query_string”查询中不起作用
- c - 如何读取二进制文件中的特定记录
- postgresql - 无法从 PowerBI Desktop 连接 PostgreSQL
- r - 循环用于在另一个变量的多个值上获取和/或操作 R 中的系统发育