Filtres AngularJS

Vous pouvez ajouter des filtres en AngularJS pour formater les données.

Filtres AngularJS

AngularJS fournit des filtres pour convertir les données :

• currency Formater un nombre en format monétaire
• date Formater une date dans un format spécifié
• filter Sélectionner un sous-ensemble d'un tableau
• json Formater un objet en chaîne JSON
• limitTo Limiter un tableau/une chaîne à un nombre spécifique d'éléments/caractères
• lowercase Formater une chaîne en minuscules
• number Formater un nombre en chaîne
• orderBy Trier un tableau à l'aide d'une expression
• uppercase Formater une chaîne en majuscules

Ajouter des filtres à l'expression

Vous pouvez ajouter des filtres à l'expression en utilisant le symbole管道符 |, suivi d'un filtre.

uppercase Le filtre formate une chaîne en majuscules :

Instance

<div ng-app="myApp" ng-controller="personCtrl">
<p>Le nom est {{ lastName | uppercase }}</p>
</div>

Essayez-le vous-même

lowercase Le filtre formate une chaîne en minuscules :

Instance

<div ng-app="myApp" ng-controller="personCtrl">
<p>Le nom est {{ lastName | lowercase }}</p>
</div>

Essayez-le vous-même

Ajouter un filtre à une instruction

en utilisant le caractère pipe | suivi d'un filtre, vous pouvez ajouter un filtre à une instruction, par exemple ng-repeat:

Instance

Le filtre orderBy 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>

Essayez-le vous-même

Filtre currency

currency Les filtres forment un nombre sous forme de devise :

Instance

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Prix : {{ price | currency }}</h1>
</div>

Essayez-le vous-même

Pour plus d'informations sur le filtre currency, veuillez consulter notre manuel de référence des filtres AngularJS.

Filtre filter

filter Le filtre sélectionne un sous-ensemble d'un tableau.

filter Le filtre ne peut être utilisé que sur des tableaux, il retourne un tableau contenant uniquement les éléments correspondants.

Instance

Retourne 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>

Essayez-le vous-même

Pour plus d'informations sur le filtre filter, veuillez consulter notre manuel de référence des filtres AngularJS.

Filtrer un tableau en fonction de l'entrée de l'utilisateur

en définissant ng-model Les instructions nous permettent d'utiliser la valeur du champ d'entrée comme expression dans le filtre.

Entrez une lettre dans le champ d'entrée, la liste se réduira ou s'élargira en fonction des correspondances :

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Instance

<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>

Essayez-le vous-même

Trier un tableau en fonction de l'entrée de l'utilisateur

Cliquez sur l'en-tête pour modifier l'ordre de tri :

en ajoutant ng-click Les instructions nous permettent d'exécuter une fonction qui modifie l'ordre de tri des éléments d'un tableau :

Instance

<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>

Essayez-le vous-même

Filtre personnalisé

Vous pouvez créer votre propre filtre en enregistrant une nouvelle fonction usine de filtre dans le module :

Instance

Créer un filtre personnalisé nommé "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>

Essayez-le vous-même

myFormat Les filtres formatent chaque caractère sur deux en majuscules.