angularjs 根据嵌套数组中的匹配值进行过滤

Question

这是我的代码。请运行脚本看看它是如何工作的:

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>

从上面的代码来看，我的数据数组包含具有用户名称、他的 phone 号码和他所属的呼叫队列的对象。

我有四个呼叫队列，分别是111,456,201和665。

一个用户可以在任意数量的呼叫队列中。我已经过滤了控制器中的数据，以便它只显示属于前端队列 111 或队列 456 的用户。

所以根据我的代码，用户 Edmond 属于队列 665，因此他的详细信息不会显示在前端。其他 3 个用户属于 111、456 或两者，因此他们的详细信息显示在用户面板中。

然后过滤器 111 仅显示属于队列 111 的用户。过滤器 456 将仅显示属于队列 456 的用户。

现在每个队列的用户都有一个状态。状态可以是 Unavailable、Paused 等

I have a filter called Paused in the front end as shown in the code and this filter is supposed to output only those user's whose status is Paused in either 111 or the 456 queue only. It should not output the user if his status is not Paused in 111 or 456.

When I click the Paused filter it displays the name John and George. This output is actually wrong because I only want to display those whose status is Paused in either 111 or 456 queue. So in the output the result for George is correct as his status is Paused in the queue 456 but for John the output is wrong as he is not paused in the queue 111 or 456. He's paused in the queue 201 and is still being displayed by the Paused filter which is not the expected output.

预期输出应该只显示 George 的数据，因为他实际上属于两个队列之一（111 或 456）并且他的状态在其中一个队列（111 或 456）中暂停当我单击“已暂停”过滤器时，它会显示在前端。我该怎么做？

Answer 1

我通过在控制器中创建自定义函数解决了这个问题：

$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>

angularjs 根据嵌套数组中的匹配值进行过滤

angularjs filter based on matching values in nested array

javascript

arrays

angularjs

sorting

angularjs-filter