Filtres AngularJS
Des filtres peuvent être ajoutés dans AngularJS pour formater les données.
Filtres AngularJS
AngularJS fournit des filtres pour transformer les données :
currencyFormater un nombre au format monétaire.dateMettre en forme une date dans un format spécifié.filterSélectionnez un sous-ensemble d'éléments dans un tableau.jsonFormater un objet en une chaîne JSON.limitToLimite un tableau/chaîne à un nombre spécifié d'éléments/caractères.lowercaseFormater une chaîne en minuscules.numberFormater un nombre en une chaîne.orderByOrdonne un tableau par une expression.uppercaseFormater une chaîne en majuscules.
Ajout de filtres aux expressions
Des filtres peuvent être ajoutés aux expressions en utilisant le caractère pipe |, suivi d'un filtre.
Les uppercasechaînes de format de filtre en majuscule :
Exemple
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Les lowercasechaînes de format de filtre en minuscules :
Exemple
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Ajout de filtres aux directives
Des filtres sont ajoutés aux directives, comme ng-repeat, en utilisant le caractère pipe
|, suivi d'un filtre :
Exemple
Le orderByfiltre trie un tableau :
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Le filtre de devise
Le currencyfiltre formate un nombre comme devise :
Exemple
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
En savoir plus sur le filtre de devise dans notre référence de filtre de devise AngularJS
Le filtre Filtre
Le filterfiltre sélectionne un sous-ensemble d'un tableau.
Le filterfiltre ne peut être utilisé que sur des tableaux et renvoie un tableau contenant uniquement les éléments correspondants.
Exemple
Renvoie les noms contenant la lettre "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
En savoir plus sur le filtre filter dans notre référence de filtre de filtre AngularJS
Filtrer un tableau en fonction de l'entrée de l'utilisateur
En définissant la ng-modeldirective sur un champ d'entrée, nous pouvons utiliser la valeur du champ d'entrée comme expression dans un filtre.
Tapez une lettre dans le champ de saisie et la liste se rétrécira/s'agrandira en fonction de la correspondance :
- Jani
- Carl
- Margareth
- Hégé
- Jo
- Gustave
- Birgit
- Marie
- Kaï
Exemple
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Trier un tableau en fonction de l'entrée de l'utilisateur
Cliquez sur les en-têtes de tableau pour modifier l'ordre de tri ::
| Nom | Pays |
|---|---|
| Jani | Norvège |
| Carl | la Suède |
| Margareth | Angleterre |
| Hégé | Norvège |
| Jo | Danemark |
| Gustave | la Suède |
| Birgit | Danemark |
| Marie | Angleterre |
| Kaï | Norvège |
En ajoutant la ng-clickdirective sur les en-têtes de table, nous pouvons exécuter une fonction qui modifie l'ordre de tri du tableau :
Exemple
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
Filtres personnalisés
Vous pouvez créer vos propres filtres en enregistrant une nouvelle fonction de fabrique de filtres avec votre module :
Exemple
Créez un filtre personnalisé appelé "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Le myFormatfiltre formatera tous les autres caractères en majuscules.