基於嵌套數組中匹配值的 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 隊列中顯示狀態為 Paused 的那些。 所以在輸出中，George 的結果是正確的，因為他的狀態是 Paused in the queue 456 但對於 John 來說輸出是錯誤的，因為他沒有在 queue 111 或 456 中暫停。他在隊列 201 中暫停並且仍然被顯示不是預期輸出的 Paused 過濾器。

預期的輸出是它應該只顯示 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>