Angular.js ng-repeat filter by property having one of multiple values (OR of values)

Question

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') }">

Sensitometer

Might help you #15868748 – Wetzell

refer my answer - #27607095 – Incitement

Does this answer your question? How to filter multiple values (OR operation) in angularJS – Tamtama

Answer 1

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.

Spaceship

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. – Sensitometer

@Spaceship To be more precise, you should add the color attribute : $scope.myFilter = function (item) { return item.color === 'red' || item.color === 'blue'; }; – Brake

Answer 2

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' }">

Elenaelenchus

Would this not be more like an "and" condition? – Kv

Answer 3

I thing ng-if should work:

<div ng-repeat="product in products" ng-if="product.color === 'red' 
|| product.color === 'blue'">

Brittenybrittingham

This works, but $index will refer to original array index – Elderly

Answer 4

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

Michaeu

Thanks, but if you read the question carefully I wanted a solution without writing a custom filter – Sensitometer

Answer 5

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

https://mcmap.net/q/211064/-passing-arguments-to-angularjs-filters (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://mcmap.net/q/211064/-passing-arguments-to-angularjs-filters (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>

Incontestable

Answer 6

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.

Glyceride

Answer 7

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>

Artair