How to filter multiple values (OR operation) in angularJS

by

I would just create a custom filter. They are not that hard.

angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies,genres) {
      var out = [];
      // Filter logic here, adding matches to the out var.
      return out;
    }
  });

template:

<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>

Edit here is the link: Creating Angular Filters

UPDATE: Here is a fiddle that has an exact demo of my suggestion.

More Related Contents:

  1. ng-repeat finish event
  2. Way to ng-repeat defined number of times instead of repeating over array?
  3. how to split the ng-repeat data with three columns using bootstrap
  4. How to improve performance of ngRepeat over a huge dataset (angular.js)?
  5. AngularJS multiple filter with custom filter function
  6. orderBy multiple fields in Angular
  7. AngularJS – how to get an ngRepeat filtered result reference
  8. angular ng-repeat in reverse
  9. Angular – Can’t make ng-repeat orderBy work
  10. ngRepeat Filter by deep property
  11. How To bind data using TypeScript Controller & Angular Js
  12. Access index of the parent ng-repeat from child ng-repeat
  13. Dynamic form name attribute in Angularjs
  14. Skip ng-repeat JSON ordering in Angular JS
  15. Understanding the ngRepeat ‘track by’ expression
  16. AngularJS ng-repeat handle empty list case
  17. Angular passing scope to ng-include
  18. Angular.js ng-repeat across multiple elements
  19. Angular.js ng-repeat filter by property having one of multiple values (OR of values)
  20. How to generates dynamically ng-model=”my_{{$index}}” with ng-repeat in AngularJS?
  21. How do I set the value property in AngularJS’ ng-options?
  22. How to set an iframe src attribute from a variable in AngularJS
  23. Does it make sense to use Require.js with Angular.js? [closed]
  24. AngularJS $resource RESTful example
  25. Angular Js currency, symbol euro after
  26. Angular/UI-Router – How Can I Update The URL Without Refreshing Everything?
  27. How to delete ‘#’ sign in angular-ui-router URLs
  28. ESLint’s “no-undef” rule is calling my use of Underscore an undefined variable
  29. Jenkins error – Blocked script execution in . because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set
  30. Angularjs – simple form submit

Leave a Comment