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

问题描述

我检查了其他问题，但它们似乎无法解决我的问题.

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

这是我的代码:

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操作.

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.

期望的结果:我想要这样，当我同时单击两个复选框时 它应该一起显示111和456中的所有记录，即或"运算.

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.

我该怎么做?

推荐答案

您可以尝试通过引用

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

在您的情况下，自定义angularjs过滤器将接受3个输入，即您要过滤的列表和checkboxes的值-queue111和queue456.根据过滤器内部复选框的值提供必要的条件，以执行过滤和返回数据.

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.

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

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>

到

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

其中

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

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.

此外，如果您提供 codepen /

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