AngularJs et les filtres

C'est une autre entité d'AngularJs : Les filtres filter. Il vont servir à modifier le rendu d'une variable dans votre HTML.

Utilisation des filtres

Le cas le plus pertinent est l'affichage d'une date Prenons l'exemple suivant:

<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>Un exemple avec JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/app.controller.js"></script>
  </head>
  <body data-ng-app="MyApp" data-ng-controller="MainCtrl">
    <label>Nous sommes le</label>
    <span data-ng-bind="maintenant"></span>
  </body>
</html>  
/* app/app.js */

// Déclaration de notre module
angular.module("MyApp", []);  
/* app/app.controller.js */

angular.module("MyApp").controller("MainCtrl", function ($scope) {  
    "use strict";

    $scope.maintenant = new Date();
});

https://jsfiddle.net/rt7wpo79/

Vous remarquez que la date n'est pas super lisible comme ça:

Nous sommes le Mon Mar 27 2017 08:15:47 GMT+0200 (CEST)

Le filtre prends alors tout son sens. Nous allons appliquer un filter de date sur la variable maintenant de cette façon : maintenant | date:'dd/MM/yyyy'

On obtient:

Nous sommes le 27/03/2017

Vous trouverez toutes les utilisation de ce filtre sur https://docs.angularjs.org/api/ng/filter/date

Creation d'un filtre

Vous avez besoin de vous créer un filtre ? C'est parti ! créez-vous un fichier app/app.filter.js (comme pour les contrôleur, on soigne la syntaxe du nommage du fichier de filtre)

/* app/app.filter.js */

// filter qui juxtapose
angular.module("MyApp").filter("bob", function() {  
    return function (input, opt1, opt2) {
        return [opt1, input, opt2].join(" ");
    };
});

et modifiez votre HTML

<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8">
    <title>Un exemple avec JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/app.controller.js"></script>
    <script src="app/app.filter.js"></script>
  </head>
  <body data-ng-app="MyApp" data-ng-controller="MainCtrl">
    <div>
       <span data-ng-bind="'tout' | bob:'coucou':'le monde'"></span>
    </div>
  </body>
</html>  

https://jsfiddle.net/kkhcfwsy/1/

coucou tout le monde

Le filtre a bien été appliqué sur la chaine 'tout' en préfixant avec le premier paramètre et suffixant avec le second paramètre. Vous remarquez que l'on utilise | pour introduire un filtre et que l'on utilise : pour introduire un paramètre de filtre.

Remarquez aussi que l'on peut chainer les filtres. Essayez : <span data-ng-bind="maintenant |date:'dd/MM/yyyy' | bob:'nous sommes le':'et il fait beau'"></span>

Les trucs à pas faire

Un filtre n'est pas fait pour décorer des éléments avec de l'HTML. Par example un filtre qui ajoute <strong></strong> autour d'un texte. Pour faire ce genre de chose, il y a une autre entité appelée directive ou encore une entité appelée component