Назначьте класс CSS, используя ng-класс в угловых js - PullRequest
Новая
       2

Назначьте класс CSS, используя ng-класс в угловых js

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

Я использую 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>

Моя проблема в том, что я хочу назначить класс "available", еслиМассив очереди у пользователей содержит число «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}"

Ответы [ 3 ]

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

Вы должны добавить использовать 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

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

Попробуйте приведенный ниже фрагмент кода

можно достичь с помощью 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>
0 голосов
/ 19 ноября 2018

Чтобы проверить это условие, где 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...