фильтр angularjs на основе сопоставления значений во вложенном массиве - PullRequest
Новая
       19

фильтр angularjs на основе сопоставления значений во вложенном массиве

0 голосов
/ 22 декабря 2018

Вот мой код.Пожалуйста, запустите скрипт, чтобы увидеть, как он работает: 

var app = angular.module('myApp', []);

app.controller('listdata', function($scope, $http) {
var data = [{
    "name": "John",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    },
    {
        "number": "111",
        "status": "Unavailable"
    },
    {
        "number": "201",
        "status": "Paused"
    }],
    "phone": "7411173737"
},
{
    "name": "George",
    "queue": [{
        "number": "111",
        "status": "Paused"
    },
    {
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "Hilary",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "Edmond",
    "queue": [{
        "number": "665",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
$scope.a = [];
$scope.users = [];
for(i=0;i<data.length;i++){
    for(j=0;j<data[i].queue.length;j++){
        if(data[i].queue[j].number == 111 || data[i].queue[j].number == 456){
            $scope.a.push(data[i]);
        }
    }
}
$scope.users = $scope.a;
//console.log($scope.users);
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
    $scope.filter456 = function (user) {
           return (user.queue.find(({number}) => number === '456'));
        }
});

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [],
          keys = [];
      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });
      return output;
   };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">

<label class="switch">
  <input type="checkbox" ng-model="queue111">111
</label>
<label class="switch">
  <input type="checkbox" ng-model="queue456">456
</label>
<label class="switch">
  <input type="checkbox" ng-true-value='"Paused"' ng-false-value='' ng-model="paused">Paused
</label>
<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users|filter: queue111? filter111: ''|unique:'name'|filter: queue456? filter456: ''|filter: paused track by $index">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>

</div>

Из приведенного выше кода мой массив данных содержит объекты, которые имеют имя пользователя, его номер телефона и очередь вызовов, к которой он принадлежит.

У меня четыре очереди вызова 111,456,201 и 665 соответственно.

Один пользователь может находиться в любом количестве очередей вызова.Я отфильтровал данные в контроллере так, что он показывает только пользователей, которые принадлежат либо к очереди 111, либо к очереди 456. На переднем конце.

Так что из моего кода пользователь Эдмонд принадлежит к очереди 665, поэтому его данные не являютсяотображается в передней части.Остальные 3 пользователя принадлежат либо 111, 456, либо обоим, поэтому их данные отображаются на пользовательской панели.

Тогда фильтр 111 показывает только тех пользователей, которые принадлежат очереди 111. Фильтр 456 покажет только тех пользователей, которые принадлежатв очередь 456.

Теперь у пользователя есть статус для каждой очереди.Состояние может быть любым, например Unavailable, Paused и т. Д.

У меня есть фильтр с именем Paused во внешнем интерфейсе, как показано в коде, и этот фильтр должен выводить только тепользователь, чей статус приостановлен только в очереди 111 или 456.Он не должен выводить пользователя, если его статус не приостановлен в 111 или 456.

Когда я нажимаю фильтр Paused, отображается имя Джон и Джордж.Этот вывод на самом деле неверен, потому что я хочу отображать только те, чей статус «Приостановлено» в очереди 111 или 456.Таким образом, в выводе результат для Джорджа правильный, так как его статус «Приостановлен» в очереди 456, но для Джона вывод неправильный, поскольку он не приостановлен в очереди 111 или 456. Он приостановлен в очереди 201 и по-прежнему отображаетсяПриостановленный фильтр, который не является ожидаемым выходным сигналом.

Ожидаемый вывод - он должен отображать только данные для Джорджа, поскольку он действительно принадлежит к одной из двух очередей (111 или 456) и его состоянию.приостанавливается в одной из очередей (111 или 456), которые я отображаю во внешнем интерфейсе, когда щелкаю фильтр Приостановлено. Как мне это сделать?

1 Ответ

0 голосов
/ 24 декабря 2018

Я решил проблему, создав пользовательскую функцию в контроллере следующим образом: 

$scope.pausedc = function (user) {
          return (user.queue.find(({number,status}) => number === '111' && status === 'Paused' || number === '456' && status === 'Paused'));
      }

и html: 

<label class="switch">
  <input type="checkbox"  ng-model="paused">Paused
</label>


<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users| filter:paused? pausedc: '' track by $index">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>
...