How to Filter Multiple Values (Or Operation) in Angularjs

How to filter multiple values (OR operation) in angularJS

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.

How to filter multiple values (OR operation) in angularjs if filter is false

For this you will need to create a simple filter function in controller. The usage could be something like this for example:

users | filter:userFilter({username: 'betty', age: 18}

Here is a demo:

angular.module('demo', []).controller('Ctrl', Ctrl);
function Ctrl($scope) {  $scope.users = [    {"id":1,"username":"", "age": "18"},    {"id":8,"username":"betty", "age": ""},    {"id":14,"username":"", "age": "18"},    {"id":3,"username":"jumbo1", "age": ""},  ];      $scope.userFilter = function(filter) {    return function(user) {      return user.username == filter.username || user.age == filter.age;    };    };}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script><body ng-app="demo">  <div ng-controller="Ctrl">    <div ng-repeat="user in filtered = (users | filter:userFilter({username: 'betty', age: 18}))">      <span>{{ user | json }}</span>    </div>    <pre>Users: {{users.length}}<br>Filtered Users: {{filtered.length}}</pre>      </div></body>

How to filter multiple values (OR operation) in angularJS with checkbox

Use a filter function:

View:

<ul ng-repeat="movie in movies | filter: showMovie">
    <li>{{movie.name}}</li>
</ul>

Controller:

$scope.showMovie = function(movie){
    return movie.genre === $scope.Filter.Comedy || 
        movie.genre === $scope.Filter.Drama ||
        movie.genre === $scope.Filter.Action;
};

Fiddle

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

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.

AngularJS End User Filter multiple values

Forked fiddle here: http://jsfiddle.net/85dobcum/

This should do it for you:

<div ng-app ng-controller="Main">
    <input type='checkbox' ng-model='Food' ng-true-value="Food" ng-false-value="" />Food
    <br />
    <input type='checkbox' ng-model='Furniture' ng-true-value="Furniture" ng-false-value="" />Furniture
    <br />
    <input type='checkbox' ng-model='Fences' ng-true-value="Fences" ng-false-value="" />Fences
    <br />
    <hr />
    <div ng-repeat="product in products | filter:search | filter: productType">
    {{product.name}} | {{product.type}}
    </div>
</div>

function Main($scope){
    $scope.products = [{name: 'Product One', type: 'Food'},
                    {name: 'Product Two', type: 'Furniture'},
                    {name: 'Product Three', type: 'Fences'},
                    {name: 'Product Four', type: 'Food'},
                    {name: 'Product Five', type: 'Furniture'},
                    {name: 'Product Six', type: 'Fences'}];

    $scope.productType = function(product)  {
         var filters = []
         filters.push($scope.Food)
         filters.push($scope.Furniture)
         filters.push($scope.Fences)
         if (filters.toString().length <=4) {return true} 
         else {return filters.indexOf(product.type)>-1 }
    }
}

How to filter with ng-repeat based on multiple values and specific string in it

You need custom filter

HTML :

<div data-ng-repeat="product in products | filter: filterTags">
      <div>{{ product.name }}</div>
    </div>

JS :

In the controller :

arrFilterTag= ['tag1','tag2'];

    .filter('filterTags', function () {

        return function (products, arrFilterTag) {
            products.filter(function (val) {
                return arrFilterTag.indexOf(val.slug) > -1; 
//arrFilterTag['tag1','tag2']
            });

            return products;
        }
    })

Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

Here is the plunker

New plunker with cleaner code & where both the query and search list items are case insensitive

Main idea is create a filter function to achieve this purpose.

From official doc

function: A predicate function can be used to write arbitrary filters.
The function is called for each element of array. The final result is
an array of those elements that the predicate returned true for.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search ">

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

Update

Some people might have a concern on performance in real world, which is correct.

In real world, we probably would do this kinda filter from controller.

Here is the detail post showing how to do it.

in short, we add ng-change to input for monitoring new search change

and then trigger filter function.

How to filter multiple dynamic values in angularJS

You should generate filter inputs using bracket notation:

<div ng-repeat="distinctgenre in distinctgenres'">
    <input type="checkbox" ng-model="genrefilters[distinctgenre]" /> {{distinctgenre}}
</div>