Question

我正在使用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}"

Answer 1

要检查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>

Answer 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

Answer 3

尝试下面的代码段

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

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

3 个答案: