Les filtres sont utilisés pour modifier les données modifiés et peuvent être classés dans des expressions ou en utilisant des directives de caractères de tuyau. Vous trouverez ci-dessous une liste de filtres couramment utilisés.
| S.No. | nom | décrire |
|---|---|---|
| 1 | capital | Convertir le texte en texte majuscule. |
| 2 | inférieur inférieur | Convertir le texte en texte minuscule. |
| 3 | devise | Texte de format de devise. |
| 4 | Filtre | Filtrez une gamme de sous-ensembles Il est basé sur les critères fournis. |
| 5 | Trier | Le tri fournit des tableaux de base standard. |
Filtre Caps
Ajoutez des filtres en majuscules pour utiliser les expressions de caractères de tuyau. Ici, des filtres en capital sont ajoutés et les noms des étudiants sont imprimés en majuscules.
Entrez le prénom: <entrée type = "Text" ng-model = "Student.FirstName"> Entrez le nom de famille: <Input Type = "Text" ng-model = "Student.lastName"> Nom dans le haut de cas: {{Student.fullName () | majuscule}}Filtre en minuscules
Ajoutez des filtres minuscules en utilisant des expressions de caractères de tuyau. Ajoutez un filtre minuscule ici pour imprimer les noms des étudiants en lettres minuscules.
Entrez le prénom: <entrée type = "Text" ng-model = "Student.FirstName"> Entrez le nom de famille: <Input Type = "Text" ng-model = "Student.lastName"> Nom dans le haut de cas: {{Student.fullName () | minuscule}}Filtre de devise
Le filtre en dollars canadien utilise un caractère de tuyau pour retourner l'expression du numéro. Ici, nous avons ajouté des filtres aux frais d'impression de devises en utilisant le format de devise.
Entrez les frais: <entrée type = "text" ng-model = "Student.Fees"> Frais: {{Student.fees | devise}}Filtres pour filtres
Pour afficher uniquement les sujets souhaités, nous utilisons le nom de sujet comme filtre.
Entrez le sujet: <input type = "text" ng-model = "sujet"> Sujet: <ul> <li ng-repeat = "Sujet dans Student.Subjects | Filter: SubjectName"> {{sujetTrier le filtre
Pour trier les sujets par tags, nous utilisons des balises d'ordre.
Sujet: <ul> <li ng-repeat = "Sujet dans Student.Subjects | OrderBy: 'Marks'"> {{sujet .name + ', marks:' + suject.marks}} </li> </ul>exemple
Les exemples suivants montreront tous les filtres mentionnés ci-dessus.
testangularjs.html
<html> <éad- head> <ititle> Filtres JS angulaires </tapie> </ head> <body> <h2> AngularJS Exemple d'application </h2> <div ng-app = "" ng-controller = "StudentController"> <Table> <Tr> <Td> Entrez le prénom: </td> <td> <port type = "Text" ng-model = "Student.FirstName"> </td> </tr> <tr> <td> Entrez le nom de famille: </td> <td> <input type = "Text" ng-model = "Student.lastName"> </pd> </tr> <td> Entrée FeoS: </td> <td> <puty type = "Text" ng-model = "Student.fees"> </td> </tr> <tr> <td> Entrez le sujet: </td> <td> <input type = "Text" ng-model = "sujetname"> </td> </tr> </tr> </tr> <tr> <td> nom dans le cas supérieur: </td> <td> {{{Student. Uppercase}} </td> </tr> <tr> <td> Nom en bas de cas: </td> <td> {{Student.fullName () | minuscules}} </td> </tr> <tr> <td> Frais: </td> <td> {{Student.fees | Currency}} </td> </tr> <tr> <td> Sujet: </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> <cript> fonction étudiantController ($ scope) {$ scope.student = {premier nom: "Mahesh", LastName: "Parachar", Fees: 500, sujets: [{nom: 'Physic {name: 'math', marques: 65}], fullName: function () {var studentObject; StudentObject = $ scope.Student; return StudentObject.FirstName + "" + StudentObject.lastName; }};} </ script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </ script> </ body> </html>Sortir
Ouvrez Textangularjs.html dans un navigateur Web et voyez les résultats suivants:
Ce qui précède est l'information triant le filtre AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!