Tableaux AngularJS Contrôleurs AngularJS

Filtres AngularJS

Les filtres sont utilisés pour modifier les données. Vous pouvez les combiner dans des expressions ou des instructions en utilisant le caractère vertical (|). La liste suivante montre les filtres courants.

Numéro	Nom et description
1	`uppercase` Convertir le texte en texte en majuscules.
2	`lowercase` Convertir le texte en texte en minuscules.
3	`currency` Définir le format du texte en format monétaire.
4	`filtre` Filtrer un tableau pour obtenir un sous-ensemble en fonction des conditions fournies.
5	`orderby` Trier un tableau en fonction des conditions fournies.

uppercase - Filtre majuscules

Utilisez le caractère pipe (|) pour ajouter le filtre majuscules à l'expression. Ici, nous avons ajouté le filtre majuscules pour imprimer le nom de l'étudiant en majuscules.

Entrer le prénom : <input type = "text" ng-model = "student.firstName">
Entrer le nom de famille : <input type = "text" ng-model = "student.lastName">
Nom en majuscules : {{student.fullName() | uppercase}}

lowercase - Filtre minuscules

Utilisez le caractère pipe (|) pour ajouter le filtre minuscules à l'expression. Ici, nous avons ajouté le filtre minuscules pour imprimer le nom de l'étudiant en minuscules.

Entrer le prénom : <input type = "text" ng-model = "student.firstName">
Entrer le nom de famille : <input type = "text" ng-model = "student.lastName">
Nom en minuscules : {{student.fullName() | lowercase}}

currency - Filtre monétaire

Utilisez le caractère vertical (|) pour ajouter le filtre monétaire à l'expression renvoyant un nombre. Ici, nous avons ajouté le filtre monétaire pour imprimer les frais au format monétaire.

Entrer les frais : <input type = "text" ng-model = "student.fees">frais : {{student.fees | currency}}

filtre - Filtre

Pour ne montrer que les thèmes nécessaires, nous utilisons subjectName comme filtre.

Entrer le thème : <input type = "text" ng-model = "subjectName">
Thème :
<ul>
　　　<li ng-repeat = "subject in student.subjects | filter: subjectName">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

orderby　- Filtre

To sort the themes by marks, we use the orderBy tag.

Subject:
<ul>
　　　<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

Online Examples

The following examples show the use of all the above filters.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>Angular JS Filters</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Example of AngularJS Filter Usage</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController">
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Name:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Surname:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Cost:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.fees"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Enter Theme:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "subjectName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　　　　<br/>
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Uppercase Name:</td><td>{{ student.fullName() | uppercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Lowercase Name:</td><td>{{ student.fullName() | lowercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Cost:</td><td>{{ student.fees | currency}}
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Theme:</td>
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　　<li ng-repeat = "subject in student.subjects | filter: subjectName | orderBy:'marks'">
　　　　　　　　　　　　　　　　　　　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {}})
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects:[
　　　　　　　　　　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　　　　　　　　　　{name:'Math',marks:65}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Vérifiez et voyez‹/›

Résultat de la sortie

Ouvrir le fichier dans un navigateur webtestAngularJS.htmVoir les résultats.