Une autre caractéristique d'AngularJS est qu'il fournit des filtres qui peuvent faire fonctionner les résultats des données en exploitant le pipeline sous UNIX.
En utilisant des pipelines, l'affichage des vues dans la liaison des données bidirectionnelle peut être facilitée.
Pendant le traitement, le filtre transforme les données en un nouveau format et peut utiliser le style de chaîne des pipelines et accepter des paramètres supplémentaires.
Méthode d'implémentation
Jetons un coup d'œil à définir et à déclarer un filtre. Tout d'abord, nous devons encore créer notre propre module myappmodule
var myAppModule = agular.module ("myApp", []);
Ensuite, sur la base du module, créez un filtre:
myAppModule.filter ("reverse", fonction () {
});
Où le verso est le nom du filtre, suivi de la déclaration de la méthode du filtre, et une autre méthode est renvoyée dans la méthode:
myAppModule.Filter ("Reverse", fonction () {return function (input, upperase) {var out = ""; for (var i = 0; i <input.length; i ++) {out = input.charat (i) + out;} if (uppercase) {out = out.touppercase ();} return out;}}});La méthode retournée interne contient deux paramètres, l'un est la valeur d'entrée, qui est la valeur acceptée par notre filtre.
Si vous souhaitez implémenter le filtre suivant:
Nom | inverse
Ensuite, l'entrée est la valeur représentée par le nom.
Les paramètres suivants sont facultatifs. Nous acceptons ici la valeur bool de majuscules et déterminons s'il faut effectuer une conversion de cas.
Il n'est pas nécessaire d'expliquer le code interne. Enfin, renvoyez la chaîne filtrée.
Échantillon de programme
<! doctype html> <html ng-app = "myApp"> <éadf> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </ script> </ head> <body> <div ng-Controller = "MyAppctrl"> name: {{name}} <br> Nom inverse: {{nom | Reverse}} <br> Nom des inverses et de la maîtrise: {{nom | Reverse: true}} </ div> <script type = "text / javascript"> var myAppModule = angular.module ("myApp", []); myAppModule.Controller ("MyAppCtrl", ["$ Scope", fonction ($ Scope) {$ scope.name = "xingoo";}]); myAppModule.Filter ("Reverse", fonction () {return function (input, upperase) {var out = ""; for (var i = 0; i <input.length; i ++) {out = input.charat (i) + out;} if (uppercase) {out = out.touppercase ();} return out;}}}); </cript> </ body> </html>Résultats en cours d'exécution
Ce qui précède est une collection d'informations sur les filtres personnalisés AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!