Comment filtrer plusieurs valeurs (OU de fonctionnement) en angularJS

Vous pouvez utiliser une fonction de contrôleur de filtre.

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>

Ici est la mise en œuvre de filtre personnalisé, qui permettra de filtrer les données à l'aide du tableau de valeurs.Il sera en charge de multiples clés de l'objet à la fois matrice et la valeur unique de clés. Comme mentionné inangularJS API AngularJS filtre Doc prend en charge de multiples clés de filtre avec une seule valeur, mais en dessous de filtre personnalisé soutiendra les mêmes caractéristiques que angularJS et prend également en charge tableau de valeurs et la combinaison des deux tableau et la valeur unique de clés.S'il vous plaît trouver l'extrait de code ci-dessous,

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

Ici est un violon exemple avec la mise en œuvre de ci-dessus "filterMutiple" filtre personnalisé.
:::Violon Exemple:::

J'ai passé un peu de temps sur elle et merci à @chrismarx, j'ai vu que angulaires par défaut de filterFilter vous permet de transmettre votre propre comparateur. Voici monté en comparateur pour plusieurs valeurs:

  function hasCustomToString(obj) {
return angular.isFunction(obj.toString) && obj.toString !== Object.prototype.toString;
}
var comparator = function (actual, expected) {
if (angular.isUndefined(actual)) {
//No substring matching against `undefined`
return false;
}
if ((actual === null) || (expected === null)) {
//No substring matching against `null`; only match against `null`
return actual === expected;
}
//I edited this to check if not array
if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
//Should not compare primitives against objects, unless they have custom `toString` method
return false;
}
//This is where magic happens
actual = angular.lowercase('' + actual);
if (angular.isArray(expected)) {
var match = false;
expected.forEach(function (e) {
e = angular.lowercase('' + e);
if (actual.indexOf(e) !== -1) {
match = true;
}
});
return match;
} else {
expected = angular.lowercase('' + expected);
return actual.indexOf(expected) !== -1;
}
};

Et si nous voulons faire un filtre personnalisé pour SEC:

angular.module('myApp')
.filter('filterWithOr', function ($filter) {
var comparator = function (actual, expected) {
if (angular.isUndefined(actual)) {
//No substring matching against `undefined`
return false;
}
if ((actual === null) || (expected === null)) {
//No substring matching against `null`; only match against `null`
return actual === expected;
}
if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
//Should not compare primitives against objects, unless they have custom `toString` method
return false;
}
console.log('ACTUAL EXPECTED')
console.log(actual)
console.log(expected)
actual = angular.lowercase('' + actual);
if (angular.isArray(expected)) {
var match = false;
expected.forEach(function (e) {
console.log('forEach')
console.log(e)
e = angular.lowercase('' + e);
if (actual.indexOf(e) !== -1) {
match = true;
}
});
return match;
} else {
expected = angular.lowercase('' + expected);
return actual.indexOf(expected) !== -1;
}
};
return function (array, expression) {
return $filter('filter')(array, expression, comparator);
};
});

Et puis on peut l'utiliser n'importe où nous voulons:

$scope.list=[
{name:'Jack Bauer'},
{name:'Chuck Norris'},
{name:'Superman'},
{name:'Batman'},
{name:'Spiderman'},
{name:'Hulk'}
];
<ul>
<li ng-repeat="item in list | filterWithOr:{name:['Jack','Chuck']}">
{{item.name}}
</li>
</ul>

Enfin voici un plunkr.

Note: Attendu tableau ne doit contenir que des objets simples comme Chaîne, Nombre etc.

Vous pouvez également utiliser ngIf si la situation le permet:

<div ng-repeat="p in [
{ name: 'Justin' }, 
{ name: 'Jimi' }, 
{ name: 'Bob' }
]" ng-if="['Jimi', 'Bob'].indexOf(e.name) > -1">
{{ p.name }} is cool
</div>

Je crois que c'est ce que vous cherchez:

<div>{{ (collection | fitler1:args) + (collection | filter2:args) }}</div>

Supposons que vous avez deux tableau, un film et un pour le genre

Suffit d'utiliser le filtre: filter:{genres: genres.type}

Ici genres, le tableau et le type a de la valeur pour le genre

Angulaire Ou Un Module De Filtre

$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)

voici le lien: https://github.com/webyonet/angular-or-filter

Voici mon exemple comment créer un filtre et de la directive pour la table jsfiddle

directive obtenir la liste (données) et de créer une table avec les filtres

<div ng-app="autoDrops" ng-controller="HomeController">
<div class="row">
<div class="col-md-12">
<h1>{{title}}</h1>
<ng-Multiselect array-List="datas"></ng-Multiselect>
</div>
</div>
</div>

mon plaisir si je peux vous aider

OPTION 1:
À l'aide Angulaire providered filtre comparateur de paramètre

//declaring a comparator method
$scope.filterBy = function(actual, expected) {
return _.contains(expected, actual); //uses underscore library contains method
};
var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];
//filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')(employees, {name: ['a','c']}, $scope.filterBy);

OPTION 2:
À l'aide Angulaire providered filtre négation

var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];
//filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')($filter('filter')(employees, {name: '!d'}), {name: '!b'});

la meilleure réponse est :

filter:({genres: 'Action', genres: 'Comedy'}