Comment filtrer plusieurs valeurs (opération OR) en angularJS

Question

Je veux utiliser le filter en angulaire et je veux filtrer pour plusieurs valeurs, si elle a l'une ou l'autre des valeurs alors elle doit être affichée.

J'ai par exemple cette structure :

Un objet movie qui a la propriété genres et je veux filtrer pour Action y Comedy .

Je sais que je peux faire filter:({genres: 'Action'} || {genres: 'Comedy'}) mais que faire si je veux le filtrer dynamiquement. Par exemple filter: variableX

Comment puis-je régler variableX dans le $scope quand j'ai un tableau des genres que je dois filtrer ?

Je pourrais le construire comme une chaîne et ensuite faire un eval() mais je ne veux pas utiliser eval()...

Answer 1

Je créerais simplement un filtre personnalisé. Ce n'est pas si difficile.

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

modèle :

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

Modifier Voici le lien : Création de filtres Angular

UPDATE : Voici un violon qui a une démo exacte de ma suggestion.

Answer 2

Vous pouvez utiliser une fonction de contrôleur pour filtrer.

function MoviesCtrl($scope) {

    $scope.movies = [{name:'Shrek', genre:'Comedy'},
                     {name:'Die Hard', genre:'Action'},
                     {name:'The Godfather', genre:'Drama'}];

    $scope.selectedGenres = ['Action','Drama'];

    $scope.filterByGenres = function(movie) {
        return ($scope.selectedGenres.indexOf(movie.genre) !== -1);
    };

}

HTML :

<div ng-controller="MoviesCtrl">
    <ul>
        <li ng-repeat="movie in movies | filter:filterByGenres">
            {{ movie.name }} {{ movie.genre }}
        </li>
    </ul>
</div>

Answer 3

La création d'un filtre personnalisé peut être inutile ici, vous pouvez simplement passer dans un comparateur personnalisé, si vous avez les valeurs multiples comme :

$scope.selectedGenres = "Action, Drama"; 

$scope.containsComparator = function(expected, actual){  
  return actual.indexOf(expected) > -1;
};

puis dans le filtre :

filter:{name:selectedGenres}:containsComparator

Answer 4

Voici l'implémentation d'un filtre personnalisé, qui filtrera les données en utilisant un tableau de valeurs, et qui supportera un objet à clés multiples avec un tableau et une seule valeur de clés. Comme mentionné dans l'API inangularJS Doc sur les filtres AngularJS supporte le filtre à clés multiples avec une seule valeur, mais le filtre personnalisé ci-dessous supportera la même fonctionnalité qu'angularJS et supportera également le tableau de valeurs et la combinaison de tableau et de valeur unique de clés,

myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
    var filterObj = {
        data:items,
        filteredData:[],
        applyFilter : function(obj,key){
            var fData = [];
            if (this.filteredData.length == 0)
                this.filteredData = this.data;
            if (obj){
                var fObj = {};
                if (!angular.isArray(obj)){
                    fObj[key] = obj;
                    fData = fData.concat($filter('filter')(this.filteredData,fObj));
                } else if (angular.isArray(obj)){
                    if (obj.length > 0){
                        for (var i=0;i<obj.length;i++){
                            if (angular.isDefined(obj[i])){
                                fObj[key] = obj[i];
                                fData = fData.concat($filter('filter')(this.filteredData,fObj));    
                            }
                        }

                    }
                }
                if (fData.length > 0){
                    this.filteredData = fData;
                }
            }
        }
    };
    if (keyObj){
        angular.forEach(keyObj,function(obj,key){
            filterObj.applyFilter(obj,key);
        });
    }
    return filterObj.filteredData;
}
}]);

Utilisation :

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

Voici un exemple de bidouille avec l'implémentation de ce qui précède. "filterMutiple" filtre personnalisé. :::Exemple de violon :: :

Answer 5

Si vous voulez filtrer sur un tableau d'objets, vous pouvez utiliser la commande suivante

filter:({genres: 'Action', key :value }.

La propriété individuelle sera filtrée par le filtre particulier donné pour cette propriété.

Mais si vous voulez filtrer par propriété individuelle et filtrer globalement pour toutes les propriétés, vous pouvez faire quelque chose comme ceci.

<tr ng-repeat="supp in $data | filter : filterObject |  filter : search">

Où "filterObject" est un objet pour rechercher une propriété individuelle et "Search" recherchera dans chaque propriété globalement.

~Atul