web-dev-qa-db-fra.com

Comment utiliser les paramètres dans le filtre dans AngularJS?

Je veux utiliser le paramètre dans le filtre, quand j'itérer certains tableaux avec ng-repeat

Exemple:

Partie HTML:

<tr ng-repeat="user in users | filter:isActive">

Partie JavaScript:

$scope.isActive = function(user) {
    return user.active === "1";
};

Mais je veux pouvoir utiliser un filtre comme

<tr ng-repeat="user in users | filter:isStatus('4')">

Mais ça ne marche pas. Comment puis-je faire quelque chose comme ça?

javascriptangularjs
70
Vural Acar

UPDATE: Je suppose que je n’ai pas suffisamment examiné la documentation, mais vous pouvez certainement utiliser le filtre filter avec cette syntaxe (voir ce violon ) pour filtrer par une propriété du objets:

<tr ng-repeat="user in users | filter:{status:4}">

Voici ma réponse originale au cas où cela pourrait aider quelqu'un:

En utilisant le filtre filter , vous ne pourrez pas transmettre de paramètre, mais vous pouvez faire au moins deux choses.

1) Définissez les données que vous souhaitez filtrer dans une variable d'étendue et faites référence à cela dans votre fonction de filtrage, comme this fiddle .

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

Html:

<li ng-repeat="user in users | filter:isStatus">

OR

2) Créez un nouveau filtre qui prend en compte un paramètre tel que this fiddle .

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.Push(input[i]);
      }      
    return out;
  };
});

Html:

<li ng-repeat="user in users | isStatus:3">

Notez que ce filtre suppose qu'il existe une propriété status dans les objets du tableau, ce qui peut le rendre moins réutilisable, mais il ne s'agit que d'un exemple. Vous pouvez lire this pour plus d’informations sur la création de filtres.

121
Gloopy

Cette question est presque identique à Passer les arguments aux filtres angularjs , auxquels j'ai déjà donné une réponse. Mais je vais poster une autre réponse ici juste pour que les gens la voient.

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:

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

Pour que cela fonctionne, vous définissez votre filtre comme suit:

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

Cette approche est plus polyvalente, car vous pouvez effectuer des comparaisons sur des valeurs imbriquées au plus profond de l'objet.

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

47
Denis Pshenov

Si vous avez créé un filtre personnalisé AngularJs, vous pouvez envoyer plusieurs paramètres à votre filtre. Voici l'utilisation dans le modèle

{{ variable | myFilter:arg1:arg2...  }}

et si vous utilisez le filtre à l'intérieur de votre contrôleur, voici comment vous pouvez le faire

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2, ...);
})

si vous avez besoin de plus d'exemples et d'une démonstration en ligne, vous pouvez l'utiliser

exemples de filtres AngularJs et démo

0
Hazarapet Tunanyan

Exemple J'ai une liste d'étudiants comme ci-dessous:

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];

Je veux filtrer les élèves par sexe pour qu'ils soient garçons et les filtrer par leur nom.

Le premier je crée une fonction nommée "filterbyboy" comme suit:

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };

Explication: si ce n'est pas le nom du filtre, alors afficher tous les élèves, filtrer par nom d'entrée et par sexe en tant que 'garçon'

Voici HTMLcode complet et démo Comment utiliser et opérateur dans l'exemple AngularJs

0
Lewis Hai

Cela peut sembler un peu sans importance, mais si vous essayez d'appliquer plusieurs filtres avec des fonctions personnalisées, vous devriez vous pencher sur: https://github.com/tak215/angular-filter-manager

0
tsuz