CODEWITHSUNDEEP
javascriptangularjshtmlangularjs-filter
node_man
node_man

Reputation: 1449

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.

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?

Upvotes: 0

Views: 533

Answers (1)

Sukanya Pai
Sukanya Pai

Reputation: 824

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.

Upvotes: 1

Related Questions