这是我的代码。请运行脚本以查看其工作方式:
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等等。
Unavailable
Paused
我Paused在前端有一个过滤器,如代码所示,该过滤器应该仅输出状态在111或456队列中暂停的那些用户。如果在111或456中未暂停用户的状态,则不应输出该用户。 当我单击Paused过滤器时,它将显示名称John和George。此输出实际上是错误的,因为我只想在111或456队列中显示状态为“已暂停”的那些。因此,在输出中,乔治的结果是正确的,因为他的状态在队列456中已暂停,但对于约翰来说,输出是错误的,因为他没有在队列111或456中被暂停。他在队列201中被暂停,并且仍由暂停的过滤器,不是预期的输出。
我Paused在前端有一个过滤器,如代码所示,该过滤器应该仅输出状态在111或456队列中暂停的那些用户。如果在111或456中未暂停用户的状态,则不应输出该用户。
当我单击Paused过滤器时,它将显示名称John和George。此输出实际上是错误的,因为我只想在111或456队列中显示状态为“已暂停”的那些。因此,在输出中,乔治的结果是正确的,因为他的状态在队列456中已暂停,但对于约翰来说,输出是错误的,因为他没有在队列111或456中被暂停。他在队列201中被暂停,并且仍由暂停的过滤器,不是预期的输出。
预期的输出是它仅应显示George的数据,因为他实际上属于两个队列之一(111或456),并且他的状态在我正在前端显示的队列之一(111或456)中被暂停了单击暂停的过滤器。 我该怎么做呢?
我通过在控制器中创建一个自定义函数来解决了这个问题,如下所示:
$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>