Otra característica de AngularJS es que proporciona filtros que pueden operar los resultados de los datos al operar la tubería en UNIX.
Mediante el uso de tuberías, se puede facilitar la visualización de vistas en la unión de datos de dos vías.
Durante el procesamiento, el filtro convierte los datos en un nuevo formato y puede usar el estilo de cadena de las tuberías y aceptar parámetros adicionales.
Método de implementación
Echemos un vistazo a cómo definir y declarar un filtro. Primero, todavía necesitamos crear nuestro propio módulo MyAppModule
var myAppModule = agular.module ("myApp", []);
A continuación, según el módulo, cree un filtro:
myAppModule.Filter ("reverso", function () {
});
Donde el reverso es el nombre del filtro, seguido por la declaración del método del filtro, y se devuelve otro método en el método:
myAppModule.filter ("reverse", function () {return function (input, upperCase) {var out = ""; for (var i = 0; i <input.length; i ++) {input.charat (i)+out;} if (uppercase) {out = out.toupperperCase ();} return out;}});El método interno devuelto contiene dos parámetros, uno es el valor de entrada, que es el valor aceptado por nuestro filtro.
Si desea implementar el siguiente filtro:
nombre | contrarrestar
Entonces la entrada es el valor representado por nombre.
Los siguientes parámetros son opcionales. Aquí aceptamos el valor de bool de mayúsculas y determinamos si debe realizar la conversión de casos.
No hay necesidad de explicar el código interno. Finalmente, devuelva la cadena filtrada.
Muestra del programa
<! DocType html> <html ng-app = "myApp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myappctrl"> nombre: {{nombre}} <br> reverso: {{{name | Reverse}} <br> Nombre de reverso y mayúscula: {{nombre | Reverse: true}} </div> <script type = "text/javaScript"> var myAppModule = angular.module ("myApp", []); myAppModule.Controller ("myAppCtrl", ["$ Scope", function ($ scope) {$ scope.name = "xingoo";}]); myAppModule.filter ("reverse", function () {return function (input, upperCase) {var out = ""; for (var i = 0; i <input.length; i ++) {input.charat (i)+out;} if (uppercase) {out = out.toupperperCase ();} return out;}}); </script> </body> </html>Resultados de ejecución
Lo anterior es una recopilación de información sobre los filtros personalizados de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!