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

查看：25
本文介绍了基于嵌套数组中匹配值的 angularjs 过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

var app = angular.module('myApp', []);app.controller('listdata', function($scope, $http) {变量数据 = [{"name": "约翰",队列": [{"number": "456",状态":不可用"},{"number": "111",状态":不可用"},{"number": "201",状态":暂停"}],电话":7411173737"},{"name": "乔治",队列": [{"number": "111",状态":暂停"},{"number": "456",状态":不可用"}],电话":8558855858"},{"name": "希拉里",队列": [{"number": "456",状态":不可用"}],电话":5454573737"},{"name": "埃德蒙",队列": [{"number": "665",状态":不可用"}],电话":7454543737"}];$scope.a = [];$scope.users = [];for(i=0;i number === '111'));}$scope.filter456 = 函数(用户){return (user.queue.find(({number}) => number === '456'));}});app.filter('unique', function() {返回函数(集合，键名){var 输出 = [],键 = [];angular.forEach(集合，功能(项目){var key = item[keyname];if(keys.indexOf(key) === -1) {键.推(键)；output.push(item);}});返回输出；};});

<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 class="switch"><input type="checkbox" ng-model="queue456">456<label class="switch"><input type="checkbox" ng-true-value='"Paused"' ng-false-value='' ng-model="paused">Paused<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>

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

我有四个呼叫队列，分别是 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 队列中暂停.所以在输出中George 的结果是正确的，因为他的状态是 Paused in the queue第456话111 或 456. 他在队列 201 中暂停，仍在显示由 Paused 过滤器导致，这不是预期的输出.

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

解决方案

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

$scope.pausedc = 函数(用户){return (user.queue.find(({number,status}) => number === '111' && status === 'Paused' || number === '456' && status=== '暂停'));}

和 html :

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.

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

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.

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.

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.

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.

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'));
      }

and 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆