Filtro AngularJS
Os filtros podem ser adicionados a expressões e diretrizes usando um caractere de tubo (|).
Filtro AngularJS
Os filtros AngularJS podem ser usados para converter dados:
| Filtro | descrever |
|---|---|
| moeda | Formato números no formato da moeda. |
| filtro | Selecione um subconjunto no item da matriz. |
| minúsculo | As cordas de formato são minúsculas. |
| ordem | Organize matrizes de acordo com uma expressão. |
| maiúsculas | A sequência formatada é capitalizada. |
Adicionar filtros às expressões
Os filtros podem ser adicionados às expressões através de um caractere de tubo (|) e um filtro. .
((Nos dois exemplos a seguir, usaremos o controlador de pessoa mencionado no capítulo anterior))
O filtro maiúsculo formata a string para a maçaneta:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. Ng-Controller = "PersonCtrl"> <p> O nome é {{LastName | Uppercase}} </p> </div> <script src = "personcontroller.js"> </sCript> </body> </html>Resultados em execução:
Nome doe
O filtro minúsculo formata a string para minúsculas:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. Ng-Controller = "PersonCtrl"> <p> O nome é {{LastName | minúsculas}} </p> </div> <script src = "personcontroller.js"> </script> </body> </html>Resultados em execução:
Nomeado doe
filtro de moeda
O filtro de moeda formata os números no formato da moeda:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "CostCtrl"> Quantidade: <input type = "número" ng-model = "Quantity"> Preço: <input type = "número" ng-model = "Price"> <p> Preço total = {{{{{{{{{{{(quantidade *))) | Moeda}} </p> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('CostCtrl', função ($ scope) {$ scope.quantity = 1; $ scope.price = 9.99;}); </script> </bodys = </bodys = 1; $ scope.price = 9.99;}); </script>Resultados em execução:
quantidade: preço:
Preço total = $ 9,99
Adicionar filtros às diretivas
Os filtros podem ser adicionados às diretrizes através de um caractere de tubo (|) e um filtro.
O filtro Orderby organiza matrizes de acordo com expressões:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. Ng-Controller = "Namesctrl"> <p> Objeto de loop: </p> <ul> <li ng-repeat = "X em nomes | orderby: 'country'"> {{x.name + ',' + x.country}} </li> </ul> </div> <cript src = "namescontroller.js"> </script> </body> </html>Resultados em execução:
Objeto de loop:
Entrada de filtro
O filtro de entrada pode ser adicionado à diretiva por um caractere de tubo (|) e um filtro seguido por um cólon e um nome de modelo.
O filtro filtro seleciona um subconjunto da matriz:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-controller = "namesctrl"> <p> Filtragem de entrada: </p> <p> <input type = "text" ng-model = "test"> </p> <ul> <li ng-repeat = "X em nomes | filtro: teste | ordy: 'country'> {{(x.name | upmercase) </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>Efeito de corrida:
Filtragem de entrada:
O exposto acima é um resumo do conhecimento sobre os filtros AngularJS. Continuaremos a adicioná -los mais tarde. Amigos que precisam podem se referir a ele.