javascript - 在angular js中使用ng-class分配css类

标签 javascript css arrays angularjs json

我正在使用 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 == 111user.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/

相关文章:

javascript - 使用 d3.js 的可扩展堆叠条形图

javascript - jQuery 点击事件处理类元素和内部元素

php - Colorbox 内容平滑淡出

css - flexbox CSS 可以根据宽高比调整大小吗?

arrays - perl 数组唯一值

javascript - 调度操作时的流输入错误

javascript - 响应式(Reactive)(基于模型)形式的 Angular 2 md-radio 按钮不起作用并停止 md-input 显示

javascript - 在 Laravel 的 Blade 模板中链接 CSS/JS

javascript - 仅通过 javascript 从下拉列表中删除重复项

arrays - 需要帮助证明循环不变性(简单的冒泡排序,部分正确性)