Comment Utiliser Les Filtres Angularjs

Qu'est-ce que le filtre AngularJs?

Il sélectionne un sous-ensemble d'éléments du tableau et le renvoie sous la forme d'un nouveau tableau.

Un filtre est très similaire à une usine ou à un service à de nombreux égards, mais présente l'avantage supplémentaire de se comporter sur une portée globale une fois créée. Comme nous l'avons vu précédemment, vous pouvez appeler un filtre à la fois sur la liaison de données dans votre code HTML ou directement à l'intérieur de votre contrôleur ou de votre directive.

Utilisation de base des filtres AngularJs

Dans la liaison de modèles HTML

[[ filter_expression | filter : expression : comparator ]] <!-- Les symboles d'impression AngularJs  sont interpolés à '[[', ']]'-->

En JavaScript

$filter('filter')(array, expression, comparator)

Angularjs Filtre Personnalisé

Comme vous le savez, AngularJs nous permet de créer des filtres personnalisés et les utiliser comme on utilise les autres filtres. Pour le faire, vous pouvez utiliser la fonction filter(...) pour créer un filtre dans votre module. Voyons la syntaxe de comment on peut créer un filtre personnalisé.

angular.module('MyModule').filter('myFilter', function() {
  return function(input, arg1, arg2) {
    var output;
    // code ...
    return output;
  }
});

Vous pouvez utiliser ce filtre dans votre contrôleur, directive etc.. ou dans votre modèle (template) avec la syntaxe nous avons vous donné. Maintenant, nous allons créer un filtre (demo), qui vous permet de filtrer par sexe de la liste des utilisateurs.

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  </head>
  <body data-ng-app="MyModule" data-ng-controller="MyController">
    <select data-ng-model="filterGender">
      <option value='male'>Male</option>
      <option value='female'>Female</option>
    </select>

    <ul>
      <li data-ng-repeat="user in users | gender:filterGender" data-ng-bind="user.name"></li>
    </ul>

    <script>
      angular.module('MyModule', [])
       .controller('MyController', function($scope){
         $scope.users = [
            {name: 'Mike', gender: 'male', age: 23},
            {name: 'Jenifer', gender: 'female', age: 32},
            {name: 'Tom', gender: 'male',  age: 14},
            {name: 'Hayk', gender: 'male', age: 18},
            {name: 'Eliana', gender: 'female', age: 28}
         ];
       })
       .filter('gender', function(){
         return function(users, gender){
           if(!gender){
             return users;
           }
           var arr = [];
           angular.forEach(users, function(v){
             if(v.gender === gender){
               arr.push(v);
             }
           })

           return arr;
         }
       })
    </script>
  </body>
</html>

Essayez-vous-même!