How to Filter Multiple Values with OR Operation in AngularJS?

Filtering Multiple Values with OR Operation in AngularJS

AngularJS provides a powerful filtering mechanism that allows you to filter data based on specific criteria. However, filtering for multiple values using the simplified OR operation can be a challenge.

Imagine you have an object representing a movie with a "genres" property. To filter for movies in either the "Action" or "Comedy" genre, you might be tempted to use a filter expression like:

{genres: 'Action'} || {genres: 'Comedy'}

However, this approach won't work for dynamic filtering. Let's say you want to filter based on an array of genres stored in $scope.genresToFilter. In that case, you need a more flexible solution.

Creating a Custom Filter

The preferred solution is to create a custom AngularJS filter. Here's how you can do it:

angular.module('myFilters', []).filter('bygenre', function() {
  return function(movies, genres) {
    var out = [];
    // Implement your filtering logic here
    return out;
  }
});

In your HTML template, use your custom filter as follows:

<ul>
  <li ng-repeat="movie in movies | bygenre:genresToFilter">{{movie.title}}: {{movie.genre}}</li>
</ul>

Now, you can dynamically change genresToFilter to filter the displayed movies based on the desired genres. This approach is much more versatile than using a static filter expression.

The above is the detailed content of How to Filter Multiple Values with OR Operation in AngularJS?. For more information, please follow other related articles on the PHP Chinese website!