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    lt div ng-repeat  product in products   filter    color   red     gt    is it possible to do something like this   lt div ng-repeat  product in products   filter    color   red    blue     gt    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    lt div ng-repeat  product in products   filter    color    red    blue      gt

User · Answer

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>

User · Answer

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

User · Answer

For me  it worked as given below    lt div ng-repeat  product in products   filter    color   red    blue     gt    lt div ng-repeat  product in products   filter    color   red     filter    color  blue     gt

User · Answer

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  lt   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  amp  amp  clause query  amp  amp  clause query length  gt  0                clause query   String clause query  toLowerCase                angular forEach input  function cp                    for  var i   0  i  lt  fields length  i                          var haystack   String keyfind fields i   cp   toLowerCase                        if  haystack indexOf clause query   gt  -1                            out push cp                           break                                                                   else               angular forEach input  function cp                    out push cp                                    return out              HTML    lt input ng-model  search query  type  text  placeholder  search by any property  gt   lt div ng-repeat  product in products    xf search   color   name    gt       lt  div gt

User · Answer

In HTML    lt div ng-repeat  product in products   filter  colorFilter  gt   In Angular    scope colorFilter   function  item       if  item color      red     item color      blue       return item

User · Answer

I thing ng-if should work    lt div ng-repeat  product in products  ng-if  product color      red      product color      blue   gt

User · Answer

Best way to do this is to use a function    lt div ng-repeat  product in products   filter  myFilter  gt    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

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

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to angularjs-filter