angularjs过滤器基于嵌套数组中的匹配值答案

【问题标题】：angularjs filter based on matching values in nested arrayangularjs过滤器基于嵌套数组中的匹配值
【发布时间】：2019-05-22 11:23:10
【问题描述】：

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

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 的用户。

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

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

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

我在前端有一个名为Paused 的过滤器，如代码所示这个过滤器应该只输出那些用户的状态仅在 111 或 456 队列中暂停。它不应该输出如果用户的状态不是在 111 或 456 中暂停。

当我单击 Paused 过滤器时，它会显示姓名 John 和 George。这个输出实际上是错误的，因为我只想显示那些在 111 或 456 队列中其状态为已暂停。所以在输出中乔治的结果是正确的，因为他的状态是暂停在队列中 456，但对于 John，输出错误，因为他没有在队列中暂停 111 或 456。他已在队列中暂停 201 并且仍在显示由不是预期输出的 Paused 过滤器。

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

【问题讨论】：

标签： javascript arrays angularjs sorting angularjs-filter

【解决方案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>

【讨论】：