angularjs过滤器基于嵌套数组中的匹配值 [英] angularjs filter based on matching values in nested array

问题描述

这是我的代码。请运行脚本以查看其工作原理：

Here is my code. Please run the script to see how it works :

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>

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

From the above code my data array contains objects which have the name of a user, his phone number and the calling queue he belongs to.

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

I have four calling queues 111,456,201 and 665 respectively.

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

One user can be in any number of calling queues. I have filtered the data in controller such that it only shows the users who belong to either queue 111 or queue 456 in the front end.

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

So from my code the user Edmond belongs to queue 665 hence his details are not displayed in the front end. The other 3 users belong to either 111, 456 or both hence their details are shown in the user panel.

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

Then filter 111 show's only those users who belong to queue 111. filter 456 will show only those users who belong to queue 456.

现在用户具有每个队列的状态。状态可以是不可用，已暂停等。

Now a user has a status for every queue. The status can be anything like Unavailable, Paused etc.

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

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.

当我点击已暂停过滤它显示名称John和George。
这个输出实际上是错误的，因为我只想在111或456队列中显示状态为Paused的
。所以在输出
中，George的结果是正确的，因为他的状态在队列中被暂停
456但是对于John来说输出是错误的，因为他没有在队列
111或456中暂停。他在队列201中暂停，并且仍然通过暂停过滤器显示
，这不是预期的输出。

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）中当我点击Paused过滤器时。
我该怎么做？

Expected output is it should only display data for George as he actually belongs to one of the two queues (111 or 456) and his status is paused in one of the queues (111 or 456) which I'm displaying in the frontend when I click the Paused filter. How do I do this?

推荐答案

我解决了这个问题通过在控制器中创建一个自定义函数，如下所示：

I solved the issue by creating a custom function in the controller like this :

$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过滤器基于嵌套数组中的匹配值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！