AngularJS
Des filtres

Votre premier filtre

Les filtres sont un type spécial de fonction qui peut modifier la manière dont une page est imprimée ou peut être utilisée pour filtrer un tableau ou une action ng-repeat . Vous pouvez créer un filtre en appelant la méthode app.filter() , en lui passant un nom et une fonction. Voir les exemples ci-dessous pour plus de détails sur la syntaxe.

Par exemple, créons un filtre qui changera une chaîne en majuscules (essentiellement une enveloppe de la fonction javascript .toUpperCase() ):

var app = angular.module("MyApp", []);

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

Regardons de plus près ce qui se passe au-dessus.

Tout d'abord, nous créons un filtre appelé "toUppercase", qui est comme un contrôleur; app.filter(...) . Ensuite, la fonction de ce filtre renvoie la fonction de filtre réelle. Cette fonction prend un seul objet, qui est l'objet à filtrer, et devrait renvoyer la version filtrée de l'objet.

Note: Dans cette situation, nous supposons que l’objet passé dans le filtre est une chaîne et que nous savons donc toujours utiliser le filtre uniquement sur les chaînes. Cela étant dit, une autre amélioration du filtre pourrait être faite pour parcourir l’objet (s’il s’agit d’un tableau) et pour rendre chaque élément majuscule.

Maintenant, utilisons notre nouveau filtre en action. Notre filtre peut être utilisé de deux manières, soit dans un modèle angulaire, soit en tant que fonction javascript (en tant que référence angulaire injectée).

Javascript

Il vous suffit d'injecter l'objet $filter angulaire $filter dans votre contrôleur, puis de l'utiliser pour récupérer la fonction de filtre en utilisant son nom.

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

HTML

Pour une directive angulaire, utilisez le symbole pipe ( | ) suivi du nom du filtre dans la directive après la chaîne réelle. Par exemple, supposons que nous ayons un contrôleur appelé MyController qui contient une chaîne appelée rawString .

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

Note de l'éditeur: Angular a un certain nombre de filtres intégrés, y compris "majuscule", et le filtre "toUppercase" est uniquement destiné à montrer comment fonctionnent les filtres, mais vous n'avez pas besoin de créer votre propre fonction majuscule.

Filtre personnalisé pour supprimer des valeurs

Un cas d'utilisation typique d'un filtre consiste à supprimer des valeurs d'un tableau. Dans cet exemple, nous passons dans un tableau et supprimons tous les caractères nuls qui s'y trouvent, en renvoyant le tableau.

function removeNulls() {
    return function(list) {
        for (var i = list.length - 1; i >= 0; i--) {
            if (typeof list[i] === 'undefined' ||
                    list[i] === null) {
                list.splice(i, 1);
            }
        }
        return list;
    };
}

Cela serait utilisé dans le HTML comme

{{listOfItems | removeNulls}}

ou dans un contrôleur comme

listOfItems = removeNullsFilter(listOfItems);

Filtre personnalisé pour formater les valeurs

Un autre cas d'utilisation des filtres consiste à formater une valeur unique. Dans cet exemple, nous transmettons une valeur et nous renvoyons une valeur booléenne vraie appropriée.

function convertToBooleanValue() {
    return function(input) {
        if (typeof input !== 'undefined' &&
                input !== null &&
                (input === true || input === 1 || input === '1' || input
                        .toString().toLowerCase() === 'true')) {
            return true;
        }
        return false;
    };
}

Qui dans le HTML serait utilisé comme ceci:

{{isAvailable | convertToBooleanValue}}

Ou dans un contrôleur comme:

var available = convertToBooleanValueFilter(isAvailable);

Effectuer un filtre dans un tableau enfant

Cet exemple a été réalisé afin de démontrer comment effectuer un filtrage approfondi dans un tableau enfant sans nécessiter un filtre personnalisé.

Manette:

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl() {
    var vm = this;
  
    vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
    vm.cars = [  
       {  
          "name":"car1",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Sedans"
             }
          ]
       },
       {  
          "name":"car2",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Commercial vehicle"
             }
          ]
       },
       {  
          "name":"car3",
          "classifications":[  
             {  
                "name":"Sport car"
             },
             {  
                "name":"Sedans"
             }
          ]
       }
    ];
  }
})();

Vue:

<body ng-app="app" ng-controller="mainCtrl as main">
  Filter car by classification:
  <select ng-model="classificationName"
          ng-options="classification for classification in main.classifications"></select>
  <br>
  <ul>
    <li ng-repeat="car in main.cars |
                   filter: { classifications: { name: classificationName } } track by $index"
                  ng-bind-template="{{car.name}} - {{car.classifications | json}}">
    </li>
  </ul>
</body>

Vérifiez la DEMO complète.

Utilisation de filtres dans un contrôleur ou un service

En injectant $filter , tout filtre défini dans votre module Angular peut être utilisé dans des contrôleurs, des services, des directives ou même d'autres filtres.

angular.module("app")
  .service("users", usersService)
  .controller("UsersController", UsersController);

function usersService () {
  this.getAll = function () {
    return [{
      id: 1,
      username: "john"
    }, {
      id: 2,
      username: "will"
    }, {
      id: 3,
      username: "jack"
    }];
  };
}

function UsersController ($filter, users) {
  var orderByFilter = $filter("orderBy");

  this.users = orderByFilter(users.getAll(), "username");
  // Now the users are ordered by their usernames: jack, john, will

  this.users = orderByFilter(users.getAll(), "username", true);
  // Now the users are ordered by their usernames, in reverse order: will, john, jack
}

Accéder à une liste filtrée depuis l'extérieur d'une répétition

Parfois, vous souhaiterez accéder au résultat de vos filtres en dehors de ng-repeat , peut-être pour indiquer le nombre d'éléments filtrés. Vous pouvez le faire en utilisant as [variablename] syntaxe as [variablename] sur le ng-repeat .

<ul>
  <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
    {{item.name}}
  </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>