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