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过滤内部的代码

<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>

其中

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

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

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

1 个答案: