Les filtres peuvent être ajoutés AngularJS aux données de format.
AngularJS Filtres
AngularJS fournit des filtres pour transformer des données:
-
currencyen forme un nombre à un format monétaire. -
dateFormat date à un format spécifié. -
filterSélectionnez un sous - ensemble d'éléments d'un tableau. -
jsonFormat un objet à une chaîne JSON. -
limitToLimites un tableau / string, dans un nombre spécifié d'éléments / caractères. -
lowercaseFormat une chaîne en minuscules. -
numberen forme un nombre en une chaîne. -
orderByOrdonne un tableau par une expression. -
uppercaseFormat une chaîne en majuscules.
Ajout de filtres aux expressions
Les filtres peuvent être ajoutés à des expressions en utilisant le caractère pipe | , suivi d'un filtre.
Les uppercase chaînes de format de filtre en majuscules:
Exemple
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Essayez - le vous - même » Les lowercase chaînes de format de filtre à minuscules:
Exemple
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Essayez - le vous - même » Ajout de filtres aux directives
Les filtres sont ajoutés aux directives, comme ng-repeat , en utilisant le caractère pipe | , suivi d'un filtre:
Exemple
Le orderBy filtre 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 » Le filtre de monnaie
La currency filtre formate un nombre en tant que monnaie:
Exemple
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Essayez - le vous - même » En savoir plus sur le filtre de la monnaie dans notre monnaie AngularJS Filter Référence
Le filtre de filtre
Le filter filtre sélectionne un sous - ensemble d'un tableau.
Le filter filtre ne peut être utilisé sur des tableaux, et il retourne un tableau contenant uniquement les éléments correspondants.
Exemple
Retour les noms qui contient 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 » En savoir plus sur le filtre de filtre dans notre filtre AngularJS Filtre Référence
Filtrer un tableau Basé sur l'entrée utilisateur
En réglant le ng-model directive sur un champ de saisie, nous pouvons utiliser la valeur du champ d'entrée comme une expression dans un filtre.
Tapez une lettre dans le champ de saisie, et la liste va diminuer / augmenter en fonction du match:
- {{ X }}
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>
Essayez - le vous - même » Trie un tableau en fonction des commentaires des utilisateurs
Cliquez sur les en-têtes de table pour modifier l'ordre de tri ::
| prénom | Pays |
|---|---|
| {{X.name}} | {{}} X.country |
En ajoutant le ng-click directive sur les en- têtes de table, nous pouvons exécuter une fonction qui modifie l'ordre de tri de la matrice:
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> Essayez - le vous - même » Filtres personnalisés
Vous pouvez faire vos propres filtres en enregistrant une nouvelle fonction de l'usine de filtration avec votre module:
Exemple
Faites 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>
Essayez - le vous - même » Le myFormat filtre formater tous les caractères en majuscules.