基于嵌套数组中匹配值的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>

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

我分别有四个呼叫队列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中已暂停，但对于约翰来说，输出是错误的，因为他没有在队列111或456中被暂停。他在队列201中被暂停，并且仍由暂停的过滤器，不是预期的输出。

预期的输出是它仅应显示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>