Filtre angularjs
Des filtres peuvent être ajoutés aux expressions et directives à l'aide d'un caractère de tuyau (|).
Filtre angularjs
Les filtres AngularJS peuvent être utilisés pour convertir les données:
| Filtre | décrire |
|---|---|
| devise | Numéros de format en format de devise. |
| filtre | Sélectionnez un sous-ensemble dans l'élément de tableau. |
| minuscule | Les chaînes de format sont minuscules. |
| commander par | Organiser des tableaux en fonction d'une expression. |
| majuscule | La chaîne formatée est capitalisée. |
Ajouter des filtres aux expressions
Des filtres peuvent être ajoutés aux expressions via un caractère de tuyau (|) et un filtre. .
((Dans les deux exemples suivants, nous utiliserons le contrôleur de personne mentionné dans le chapitre précédent))
Le filtre en majuscule formate la chaîne en majuscules:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controller = "personctrl"> <p> Le nom est {{LastName | uppercase}} </p> </ div> <script src = "PersonController.js"> </ script> </ body> </html>Résultats en cours:
Nommez la biche
Le filtre minuscule formate la chaîne en minuscules:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controller = "personctrl"> <p> Le nom est {{LastName | minuscules}} </p> </div> <script src = "personController.js"> </cript> </ody> </html>Résultats en cours:
Nommé Doe
filtre de devise
Le filtre de devise formate les nombres en format de devise:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "CostCtrl"> Quantité: <Input Type = "Number" ng-model = "Quantity"> Price: <Input Type = "Number" ng-model = "Price"> <p> Price total = {{{(quantité * Price) | Currency}} </p> </div> <cript> var app = angular.module ('myapp', []); app.Controller ('CostCtrl', fonction ($ Scope) {$ scope.quantity = 1; $ scope.pririce = 9.99;}); </cript> </ body> </html>Résultats en cours:
quantité: prix:
Prix total = 9,99 $
Ajouter des filtres aux directives
Des filtres peuvent être ajoutés aux directives via un caractère de tuyau (|) et un filtre.
Le filtre OrderBy organise les tableaux en fonction des expressions:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "namesctrl"> <p> objet de boucle: </p> <ul> <li ng-repeat = "x in noms | orderby: 'country'"> {{x.name + ',' + x.country}} </li> </ul> </ div> <script src = "nomRésultats en cours:
Objet de boucle:
Entrée de filtre
Le filtre d'entrée peut être ajouté à la directive par un caractère de tuyau (|) et un filtre suivi d'un côlon et d'un nom de modèle.
Le filtre du filtre sélectionne un sous-ensemble dans le tableau:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "namesctrl"> <p> Filtring d'entrée: </p> <p> <input type = "text" ng-model = "test"> </p> <ul> <li ng-repeat = "x dans les noms | Filter: Test | Orderby: 'Country'"> {{(x.name | uppercase) + ' </li> </ul> </ div> <script src = "namesController.js"> </ script> </ body> </html>Effet de course:
Filtrage d'entrée:
Ce qui précède est un résumé des connaissances sur les filtres angularjs. Nous continuerons de les ajouter plus tard. Les amis qui en ont besoin peuvent y faire référence.