67

Is it possible to filter an array of objects, such that the value of property can be either of a few values (OR condition) without writing a custom filter

This is similar to this problem - Angular.js ng-repeat :filter by single field

But instead of 

<div ng-repeat="product in products | filter: { color: 'red' }">

is it possible to do something like this

<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">

for a sample data as follows-

$scope.products = [
   { id: 1, name: 'test', color: 'red' },
   { id: 2, name: 'bob', color: 'blue' }
   /*... etc... */
];

I've unsuccessfully tried 

<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">
Community
  • 1
  • 1
Yogesh Mangaj
  • 3,200
  • 6
  • 32
  • 45
  • 2
    Might help you http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs – Satpal Feb 24 '14 at 12:35
  • refer my answer - http://stackoverflow.com/questions/27606595/ngrepeat-filter-by-deep-property/39523973#39523973 – Ravindra Vairagi Sep 16 '16 at 05:07
  • Does this answer your question? [How to filter multiple values (OR operation) in angularJS](https://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs) – Vega Aug 06 '20 at 04:33

7 Answers7

104

Best way to do this is to use a function:

<div ng-repeat="product in products | filter: myFilter">

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Alternatively, you can use ngHide or ngShow to dynamically show and hide elements based on a certain criteria.

Sherlock
  • 5,557
  • 6
  • 50
  • 78
  • 6
    Apart from a function or a custom filter is there no way to do it inline? ngHide will set the `display` to `none`, but the `div` will get generated and inserted into the DOM. Anyway I think function is the cleanest way to do it, was only curious if there was a syntax to specify an OR condition inline. – Yogesh Mangaj Feb 24 '14 at 13:00
  • 1
    @Sherlock To be more precise, you should add the color attribute : `$scope.myFilter = function (item) { return item.color === 'red' || item.color === 'blue'; };` – jDelforge Sep 05 '19 at 02:43
41

For me, it worked as given below:

<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">

<div ng-repeat="product in products | filter: { color: 'red'} | filter: { color:'blue' }">
Dale K
  • 25,246
  • 15
  • 42
  • 71
Amol Aranke
  • 523
  • 5
  • 8
17

I thing ng-if should work:

<div ng-repeat="product in products" ng-if="product.color === 'red' 
|| product.color === 'blue'">
Dale K
  • 25,246
  • 15
  • 42
  • 71
jrock10
  • 388
  • 1
  • 4
  • 12
10

In HTML:

<div ng-repeat="product in products | filter: colorFilter">

In Angular:

$scope.colorFilter = function (item) { 
  if (item.color === 'red' || item.color === 'blue') {
  return item;
 }
};
bboyonly
  • 101
  • 1
  • 3
8

Here is a way to do it while passing in an extra argument:

https://stackoverflow.com/a/17813797/4533488 (thanks to Denis Pshenov)

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

With the backend: 

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

.

And yet another way with an in-template filter only:

https://stackoverflow.com/a/12528093/4533488 (thanks to mikel)

<div ng:app>
  <div ng-controller="HelloCntl">
    <ul>
       <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
            <span>{{friend.name}}</span>
            <span>{{friend.phone}}</span>
        </li>
    </ul>
</div>

Community
  • 1
  • 1
aero
  • 1,654
  • 1
  • 21
  • 31
3

I found a more generic solution with the most angular-native solution I can think. Basically you can pass your own comparator to the default filterFilter function. Here's plunker as well.

Community
  • 1
  • 1
s.alem
  • 12,579
  • 9
  • 44
  • 72
0

After not able to find a good universal solution I made something of my own. I have not tested it for a very large list.

It takes care of nested keys,arrays or just about anything.

Here is the github and demo

app.filter('xf', function() {
    function keyfind(f, obj) {
        if (obj === undefined)
            return -1;
        else {
            var sf = f.split(".");
            if (sf.length <= 1) {
                return obj[sf[0]];
            } else {
                var newobj = obj[sf[0]];
                sf.splice(0, 1);
                return keyfind(sf.join("."), newobj)
            }
        }

    }
    return function(input, clause, fields) {
        var out = [];
        if (clause && clause.query && clause.query.length > 0) {
            clause.query = String(clause.query).toLowerCase();
            angular.forEach(input, function(cp) {
                for (var i = 0; i < fields.length; i++) {
                    var haystack = String(keyfind(fields[i], cp)).toLowerCase();
                    if (haystack.indexOf(clause.query) > -1) {
                        out.push(cp);
                        break;
                    }
                }
            })
        } else {
            angular.forEach(input, function(cp) {
                out.push(cp);
            })
        }
        return out;
    }

})

HTML 

<input ng-model="search.query" type="text" placeholder="search by any property">
<div ng-repeat="product in products |  xf:search:['color','name']">
...
</div>
Raj Nandan Sharma
  • 3,694
  • 3
  • 32
  • 42