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

【问题标题】：Assign css class using ng-class in angular js在angular js中使用ng-class分配css类
【发布时间】：2019-04-21 12:29:15
【问题描述】：

我正在使用 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" 可能出现在任何索引处，因此在视图中我不能总是使用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}"

【问题讨论】：

你不必使用ng-repeat als to queue???
但我认为这也会重复
@pravinnavle 检查更新的答案

标签： javascript css arrays angularjs json

【解决方案1】：

试试下面的代码 sn-p

可以使用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>

【讨论】：

如果没有数组，你能告诉我一个类似的函数来对数据进行排序吗？我的意思是我想要一个功能可以让我对不是这样的数组（'name'，'Pratik'）而不是（array，'number'，'111'）的值进行排序。因此，如果名称是 Pratik，那么我将为该元素设置一些其他类
我建议包含和使用 lodash lodash.com 进行排序搜索等。
你能帮我this
@pravinnavle 使用_.filter 方法用lodash 更新了我的答案。所以使用_.filter(array, { 'number': '111' } ) 而不是findObjectByKey 方法。
非常感谢。这对优化代码很有帮助

【解决方案2】：

您必须添加使用 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>

注意！

如果您只想显示item.number == '111'，您可以使用ng-hide/show

【讨论】：

【解决方案3】：

要检查111 出现在任何索引处的条件，简单的解决方法是调用一个函数，该函数将检查数组中的该属性并根据条件返回true 或false。如下所示：

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>

【讨论】：

按照我实现它的方式运行良好。这是我当前的解决方法 ng-class="{'available111': user.queue[0].number == 111 || user.queue[1].number == 111}"
@pravinnavle 很高兴为您提供帮助。如果对您有帮助，您可以勾选答案:)