Passer des arguments aux filtres angularjs

En fait, il existe une autre (peut-être une meilleure solution) où vous pouvez utiliser le filtre 'filtre' natif de l'angulaire et encore passer des arguments à votre filtre personnalisé.

Considérez le code suivant:

 <div ng-repeat="group in groups"> <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)"> <span>{{friend.name}}</span> <li> </div> 

Pour ce faire, il suffit de définir votre filtre comme suit:

 $scope.weDontLike = function(name) { return function(friend) { return friend.name != name; } } 

Comme vous pouvez le voir ici, weDontLike renvoie effectivement une autre fonction qui a son paramètre dans sa portée ainsi que l'élément original issu du filtre.

Il m'a fallu 2 jours pour me rendre compte que vous pouvez le faire, que vous n'avez pas encore vu cette solution.

Vérifier la polarité inverse d'un filtre angular.js pour voir comment vous pouvez l'utiliser pour d'autres opérations utiles avec filtre.

D'après ce que je comprends, vous ne pouvez pas passer d'arguments à une fonction de filtre (lorsque vous utilisez le filtre 'filtre'). Ce que vous devriez faire, c'est écrire un filtre personnalisé, comme cela:

 .filter('weDontLike', function(){ return function(items, name){ var arrayToReturn = []; for (var i=0; i<items.length; i++){ if (items[i].name != name) { arrayToReturn.push(items[i]); } } return arrayToReturn; }; 

Voici le jsFiddle de travail: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

L'autre alternative simple, sans écrire de filtres personnalisés, consiste à stocker un nom à filtrer dans une portée et à écrire:

 $scope.weDontLike = function(item) { return item.name != $scope.name; }; 

En fait, vous pouvez passer un paramètre ( http://docs.angularjs.org/api/ng.filter:filter ) et n'avez pas besoin d'une fonction personnalisée juste pour cela. Si vous réécrivez votre HTML comme ci-dessous, cela fonctionnera:

 <div ng:app> <div ng-controller="HelloCntl"> <ul> <li ng-repeat="friend in friends | filter:{name:'!Adam'}"> <span>{{friend.name}}</span> <span>{{friend.phone}}</span> </li> </ul> </div> </div> 

http://jsfiddle.net/ZfGx4/59/

Vous pouvez simplement faire comme ceci dans le modèle

 <span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span> 

Dans le filtre

 angular.module("app") .filter("firstFiler",function(){ console.log("filter loads"); return function(items, firstArgument,secondArgument){ console.log("item is ",items); // it is value upon which you have to filter console.log("firstArgument is ",firstArgument); console.log("secondArgument ",secondArgument); return "hello"; } }); 

S'allonger sur la réponse de pkozlowski.opensource et en utilisant array's méthode de filtre intégré de javascript array's une solution prétentieuse pourrait être la suivante:

 .filter('weDontLike', function(){ return function(items, name){ return items.filter(function(item) { return item.name != name; }); }; }); 

Voici le lien jsfiddle.

Plus sur le filtre Array ici .

Vous pouvez passer plusieurs arguments au filtre angulaire!

Définir mon application angulaire et une variable de niveau d'application –

 var app = angular.module('filterApp',[]); app.value('test_obj', {'TEST' : 'test be check se'}); 

Votre filtre sera comme: –

 app.filter('testFilter', [ 'test_obj', function(test_obj) { function test_filter_function(key, dynamic_data) { if(dynamic_data){ var temp = test_obj[key]; for(var property in dynamic_data){ temp = temp.replace(property, dynamic_data[property]); } return temp; } else{ return test_obj[key] || key; } } test_filter_function.$stateful = true; return test_filter_function; }]); 

Et à partir de HTML, vous enverrez des données comme: –

 <span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span> 

Ici, j'envoie un objet JSON au filtre. Vous pouvez également envoyer n'importe quel type de données comme une chaîne ou un numéro.

Vous pouvez également passer un nombre dynamique d'arguments à filtrer, dans ce cas, vous devez utiliser des arguments pour obtenir ces arguments.

Pour une démonstration de travail, passez ici – en passant de multiples arguments au filtre angulaire