Filtro AngularJS
Los filtros se pueden agregar a expresiones y directivas utilizando un carácter de tubería (|).
Filtro AngularJS
Los filtros AngularJS se pueden usar para convertir los datos:
| Filtrar | describir |
|---|---|
| divisa | Formato de números en formato de moneda. |
| filtrar | Seleccione un subconjunto del elemento de la matriz. |
| minúscula | Las cadenas de formato son minúsculas. |
| pedido | Organizar matrices de acuerdo con una expresión. |
| mayúscula | La cadena formateada está capitalizada. |
Agregar filtros a las expresiones
Los filtros se pueden agregar a las expresiones a través de un carácter de tubería (|) y un filtro. .
((En los siguientes dos ejemplos, usaremos el controlador de persona mencionado en el capítulo anterior))
El filtro de mayúsculas formatea la cadena a mayúscula:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "Personctrl"> <p> El nombre es {{LastName | uppercase}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>Resultados de ejecución:
Nombre Doe
El filtro de minúsculas formatea la cadena hasta minúsculas:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "Personctrl"> <p> El nombre es {{LastName | Mintercase}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>Resultados de ejecución:
Llamado Doe
filtro de divisas
El filtro de divisas formatea los números en formato de moneda:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "CostoCtrl"> Cantidad: <input type = "number" ng-model = "cantidad"> precio: <input type = "number" ng-model = "precio"> <p> total precio = {{(cantidad * precio) | moneda}} </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('costctrl', function ($ scope) {$ scope.quantity = 1; $ scope.price = 9.99;}); </script> </body> </html>Resultados de ejecución:
cantidad: precio:
Precio total = $ 9.99
Agregar filtros a las directivas
Los filtros se pueden agregar a las directivas a través de un carácter de tubería (|) y un filtro.
El filtro Orderby organiza matrices de acuerdo con las expresiones:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> Ng-Controller = "NamesCtrl"> <p> Loop Object: </p> <ul> <li ng-depreat = "x en nombres | ordenby: 'país'"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "nombres controller.js"> </script> </script> </script> </body> </html>Resultados de ejecución:
Objeto de bucle:
Entrada de filtro
El filtro de entrada se puede agregar a la directiva mediante un carácter de tubería (|) y un filtro seguido de un colon y un nombre de modelo.
El filtro de filtro selecciona un subconjunto de la matriz:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> Ng-Controller = "NamesCtrl"> <p> Filtrado de entrada: </p> <p> <input type = "text" ng-model = "test"> </p> <ul> <li ng-repeat = "x en nombres | filtro: test | ordenby: 'country'"> {{((x.name | Uppercase) + '' + x.country}}}} </li> </ul> </div> <script src = "namesController.js"> </script> </body> </html>Efecto de ejecución:
Filtrado de entrada:
Lo anterior es un resumen del conocimiento sobre los filtros AngularJS. Continuaremos agregándolos más tarde. Los amigos que lo necesitan pueden referirse a él.