当我们有多个过滤器时，对数据进行“或”操作的 angularjs 过滤器

Question

我检查了其他问题，但他们似乎没有解决我的问题。

这是我的代码：

var app = angular.module('myApp', []);

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    },
    {
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
    $scope.filter456 = function (user) {
           return (user.queue.find(({number}) => number === '456'));
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/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>

<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>

</div>

我分别创建了自定义函数$scope.filter111 和$scope.filter456 来过滤数据 目前，当我单击复选框 111 时，过滤器仅返回队列编号为 111 的记录，当我单击复选框 456 时，过滤器仅返回队列编号为 456 的记录。这一切都很好。当我单击两个过滤器时，它仅显示队列同时具有数字 111 和 456 的对象，即此处发生 AND 操作。

预期结果：我希望这样当我同时单击复选框时 它应该同时显示 111 和 456 中的所有记录，即 OR 操作。

我该怎么做？

Answer 1

您可以通过参考w3schools.com example 和this link 尝试创建自定义的angularJS 过滤器（以便更好地理解自定义过滤器）。

在您的情况下，自定义 angularjs 过滤器需要 3 个输入，即您要过滤的列表和复选框的值 - queue111 和 queue456。根据过滤器内复选框的值，通过提供必要的条件来执行过滤和返回数据。

这也减少了您在 HTML 中用于过滤 ng-repeat from 的代码

<div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''">
    <p> {{user.name}} {{user.phone}}</p>
  </div>

到

<div ng-repeat="user in users|customFilter: queue111:queue456">
    <p> {{user.name}} {{user.phone}}</p>
  </div>

在哪里

1. customFilter 是名称（可以是任何名称，前提是该名称为 您创建的 angularJS 过滤器的示例）。
2. users 将是您的自定义过滤器的默认第一个输入，您的复选框的值将分别是第二个和第三个输入。

另外，如果您提供codepen/plunker 演示，这样人们可以轻松调试您的问题并提供解决方案，将会很有帮助。