根据数组值angularjs分配ng-class值

Question

我的回答是这样的：

$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”相对应的状态已暂停。 我该怎么做？

Answer 1

您可以在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>