назначить значение ng-класса в соответствии со значениями массива angularjs - PullRequest
Новая
       8

назначить значение ng-класса в соответствии со значениями массива angularjs

0 голосов
/ 27 ноября 2018

мой ответ выглядит следующим образом: 

$scope.users = [{
name: 'joseph',
queue:[
{number:'111',status:'Paused'},
{number:'345',status:'Not In Use'},
{number:'342',status:'Not In Use'}],
}];

На мой взгляд, я устанавливаю класс как приостановленный, если массив очереди в ответе содержит статус = Пауза для любого индекса.Я думаю, что способ, которым я делаю это ниже, не является правильным способом, так как в случае, если массив очереди содержит более 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» в массиве очередей приостановлено.Как мне это сделать?

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете вызвать функцию контроллера в 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>
...