web-dev-qa-db-fra.com

Passer des arguments aux filtres angularjs

Est-il possible de passer un argument à la fonction de filtrage pour pouvoir filtrer par n'importe quel nom?

Quelque chose comme 

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};
javascriptangularjsangular-filters
97
shapeshifter

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

Considérons 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 que cela fonctionne, vous définissez votre filtre comme suit:

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

Comme vous pouvez le voir ici, weDontLike renvoie en réalité une autre fonction qui contient votre paramètre dans son champ ainsi que l'élément d'origine provenant du filtre.

Il m'a fallu deux jours pour comprendre que vous pouviez le faire. Vous n'avez encore jamais vu cette solution.

Checkout Inversez la polarité du filtre angular.js pour voir comment vous en servir pour d'autres opérations utiles avec filter.

216
Denis Pshenov

D'après ce que j'ai compris, vous ne pouvez pas transmettre d'arguments à une fonction de filtre (lorsque vous utilisez le filtre 'filter'). Ce que vous devez faire est d’écrire un filtre personnalisé, comme ceci:

.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 qui fonctionne: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

L’autre alternative simple, sans écrire de filtres personnalisés, est de stocker un nom à filtrer dans une portée, puis d’écrire:

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

En fait, vous pouvez passer un paramètre ( http://docs.angularjs.org/api/ng.filter:filter ) et vous n'avez pas besoin d'une fonction personnalisée pour cela. Si vous réécrivez votre code 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/

61
mikel

Vous pouvez simplement faire comme ceci Dans 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";
    }
    });
28
abhaygarg12493

Étendre la réponse sur pkozlowski.opensource et en utilisant la méthode de filtrage javascript array's une solution simplifiée pourrait être:

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

Voici le jsfiddle link .

Plus sur le filtre de tableau ici .

2
Nasif Md. Tanjim

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 telles que: - 

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

Ici, j’envoie un objet JSON au filtre . Vous pouvez également envoyer tout type de données, telle que chaîne ou nombre.

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

Pour une démonstration de travail, allez ici - passer plusieurs arguments au filtre angulaire

0
Partha Roy