AngularJS
Filtres personnalisés

Exemple de filtre simple

Les filtres formulent la valeur d'une expression à afficher pour l'utilisateur. Ils peuvent être utilisés dans des modèles de vue, des contrôleurs ou des services. Cet exemple crée un filtre ( addZ ) puis l’utilise dans une vue. Tout ce que fait ce filtre est d'ajouter un «Z» majuscule à la fin de la chaîne.

example.js

angular.module('main', [])
    .filter('addZ', function() {
            return function(value) {
                return value + "Z";
            }
     })
    .controller('MyController', ['$scope', function($scope) {
        $scope.sample = "hello";
    }])

exemple.html

Dans la vue, le filtre est appliqué avec la syntaxe suivante: { variable | filter} . Dans ce cas, la variable que nous avons définie dans le contrôleur, sample , est filtrée par le filtre que nous avons créé, addZ .

<div ng-controller="MyController">
   <span>{{sample | addZ}}</span>
</div>

Production attendue

helloZ

Utiliser un filtre dans un contrôleur, un service ou un filtre

Vous devrez injecter $filter :

angular
  .module('filters', [])
  .filter('percentage', function($filter) {
    return function (input) {
      return $filter('number')(input * 100) + ' %';
    };
  });

Créer un filtre avec des paramètres

Par défaut, un filtre a un seul paramètre: la variable sur laquelle il est appliqué. Mais vous pouvez passer plus de paramètres à la fonction:

angular
  .module('app', [])
  .controller('MyController', function($scope) {
    $scope.example = 0.098152;
  })
  .filter('percentage', function($filter) {
    return function (input, decimals) {
      return $filter('number')(input * 100, decimals) + ' %';
    };
  });

Maintenant, vous pouvez donner une précision au filtre de percentage :

<span ng-controller="MyController">{{ example | percentage: 2 }}</span>
=> "9.81 %"

... mais les autres paramètres sont facultatifs, vous pouvez toujours utiliser le filtre par défaut:

<span ng-controller="MyController">{{ example | percentage }}</span>
=> "9.8152 %"