AngularJS Filtres

Les filtres peuvent être ajoutés aux expressions et aux directives à l'aide d'un caractère pipe (|).

Filtres AngularJS

Les filtres AngularJS peuvent être utilisés pour transformer les données :

Filter Description
currency Formate un nombre au format monétaire.
filter Sélectionne un sous-ensemble parmi les éléments du tableau.
lowercase Formate une chaîne en minuscules.
orderBy Trie un tableau selon une expression.
uppercase Formate une chaîne en majuscules.

Ajouter un filtre dans les expressions

Les filtres peuvent être ajoutés aux expressions à l'aide d'un caractère barre verticale (|) et d'un filtre.

(Dans les deux exemples ci-dessous, nous utiliserons le contrôleur person mentionné dans le chapitre précédent)

uppercaseLe filtre formate une chaîne en majuscules :

Exemple AngularJS

<div ng-app="myApp" ng-controller="personCtrl">

<p>Le nom est{{ lastName | uppercase }}</p>

</div>

Essayez-le vous-même »

lowercaseLe filtre formate une chaîne en minuscules :

Exemple AngularJS

<div ng-app="myApp" ng-controller="personCtrl">

<p>Le nom est{{ lastName | lowercase }}</p>

</div>

Essayez-le vous-même »

Filtre currency

currencyLe filtre formate un nombre au format monétaire :

Exemple AngularJS

<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Prix total ={{ (quantity price) | currency }}</p>

</div>

Essayez-le vous-même »

Ajouter un filtre aux directives

Les filtres peuvent être ajoutés aux directives à l'aide d'un caractère barre verticale (|) et d'un filtre.

orderByLe filtre trie un tableau selon une expression :

Exemple AngularJS

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Essayez-le vous-même »

Filtre d'entrée

Le filtre d'entrée peut être ajouté à une directive à l'aide d'un caractère barre verticale (|) et d'un filtre, suivi d'un deux-points et d'un nom de modèle.

filterLe filtre sélectionne un sous-ensemble dans un tableau :

Exemple AngularJS

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

Essayez-le vous-même »

Filtre personnalisé

L'exemple suivant définit un filtre personnaliséreversequi inverse une chaîne :

Exemple AngularJS

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.msg = "Exemple"; }); app.filter('reverse', function() { //Vous pouvez injecter des dépendances return function(text) { return text.split("").reverse().join(""); } });

Essayez-le vous-même »
Autres extensions