带有“OR"的angularjs过滤器当我们有多个过滤器时对数据的操作 [英] angularjs filter with an "OR" operation on data when we have multiple filters

问题描述

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

这是我的代码:

var app = angular.module('myApp', []);app.controller('listdata', function($scope, $http) {$scope.users = [{"name": "pravin",队列": [{"number": "456",状态":不可用"},{"number": "111",状态":不可用"}],电话":7411173737"},{"name": "pratik",队列": [{"number": "111",状态":不可用"}],电话":8558855858"},{"name": "priyanka",队列": [{"number": "456",状态":不可用"}],电话":5454573737"},{"name": "prerana",队列": [{"number": "111",状态":不可用"}],电话":7454543737"}];$scope.filter111 = 函数(用户){return (user.queue.find(({number}) => number === '111'));}$scope.filter456 = 函数(用户){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 class="switch"><input type="checkbox" ng-model="queue456">456<div class="row" ng-controller="listdata"><div ng-repeat="user in users|filter: queue111? filter111: ''|filter: queue456? filter456: ''"><p>{{user.name}} {{user.phone}}</p>

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

<块引用>

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

我该怎么做?

解决方案

您可以通过参考 w3schools.com 示例 和 此链接(为了更好地了解自定义过滤器).

在您的情况下，自定义 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>

到

<p>{{user.name}} {{user.phone}}</p>

哪里

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

此外，如果您提供 codepen/plunker 演示，以便人们可以轻松调试您的问题并提供解决方案.

I checked other question but they don't seem to solve my issue.

Here is my code :

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>

I have created custom functions $scope.filter111 and $scope.filter456 respectively to filter data Currently when I click the checkbox 111, the filter return only the record whose queue has a number 111 and when I click the checkbox 456, the filter returns only the records whose queue has a number 456. This much is working perfectly. When I click both the filters it displays only that object whose queue has both the number 111 and 456 i.e an AND operation is occurring here.

Expected result : I want it such that when I click both the checkbox it should display all the records from 111 as well as 456 together i.e an OR operation.

How do I do this?

解决方案

You can try creating a custom angularJS filter by referring w3schools.com example and this link (for better understanding of custom filters).

In your case, the custom angularjs filter would take 3 inputs, i.e the list you want to filter and the value of the checkboxes- queue111 and queue456. Perform filtering and returning the data by providing necessary conditions based on the value of checkboxes inside the filter.

This also reduces the code that you use in your HTML for filtering inside ng-repeat from

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

to

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

where

1. customFilter is the name (can be any name, provided that name as an example) of the angularJS filter you create.
2. users will be the default first input of your custom filter and the value of your checkboxes will be the 2nd and 3rd input respectively.

Also, it would be helpful if you provide codepen/plunker demos so that people can debug your problem and provide solutions easily.

这篇关于带有“OR"的angularjs过滤器当我们有多个过滤器时对数据的操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！