Filtro (filtro) em angularJS
Mục lục
O conceito e o papel dos filtros no angularJS
Ao abordar com javascript puro, vemos que, ao trabalhar com dados, existem algumas situações em que teremos que converter um tipo de dado persistente bastante complicado, para dar um exemplo real, quando temos uma variável representando a quantidade com o tipo de dado number ( float) , se quisermos imprimir na tela em formato de moeda, teremos que fazer os seguintes passos sequencialmente:
- Converter tipo de dados em string,
- Concatenar strings adicionando um sinal $ após a string
- Imprima a string dentro do conteúdo HTML (através da propriedade innerText)
- Repita as etapas acima sequencialmente quando os dados forem atualizados
Com angularJs, temos um mecanismo de filtro para dar suporte ao modelo para encurtar essas tarefas, o modelo não precisa converter o tipo de dados, os filtros farão o trabalho de filtrar os dados e imprimir os resultados como queremos. . Resumindo, filtra os dados de reformatação quando apresentados ao usuário final
Sintaxe para usar filtros no angularJS:
{{expression | filter}}O filtro é injetado na expressão por meio do caractere "|". , seguido de filtro
Os filtros podem ser conectados como links consecutivos, por exemplo:
{{expression | filter | filter}}Nesse caso, o primeiro filtro é usado para filtrar a expressão, o segundo filtro continua filtrando o valor do primeiro filtro.
Observação: o filtro não altera o valor real da variável, apenas altera o formato de exibição do usuário final.
Lista de filtros embutidos em angularJS
Alguns dos filtros embutidos populares no angularJS:
- Moeda
- Encontro
- Minúsculas
- Maiúsculas
- Procurar
- …
Filtro de moeda
Usado para formatar a moeda para a expressão, que será exibida ao usuário no formato de moeda
Documentos: https://docs.angularjs.org/api/ng/filter/currency
Por padrão, ele usará o formato USD Dollars com 2 números após o . O exemplo abaixo descreve algumas maneiras de usar o filtro, na camada de modelo html e na camada de script, podemos usar o filtro na camada html ou o filtro na camada javascript, mas a forma da camada html será mais comum:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | currency:'$ '}} <br/> {{price | currency: '$ ' : 0}} <br/> {{price2 | currency:'VND '}} <br/> <input type="number" ng-model="price3" /> <br/> {{changeprice()}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope,$filter) => { $scope.price = 1000; $scope.price2 = 2000; $scope.price3 = 4000; $scope.changeprice = function(){ bind_model = $filter('currency')($scope.price3, '$ ', 5); return bind_model; } }); </script> </html>Resultado ao imprimir no navegador:
No entanto, do meu ponto de vista, esse filtro não atende ao VND, pois a moeda do meu país é exibida, mas o VND está à direita do número, portanto, esse filtro não responderá. Claro que existe uma solução, podemos definir nosso próprio filtro personalizado
Filtro de data
Documentos: https://docs.angularjs.org/api/ng/filter/date
Com o filtro de data, podemos representar todos os dados de data de acordo com a intenção que desejamos ao exibir os dados na interface.
Considere o exemplo abaixo para entender melhor o filtro de data:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Date filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{date | date:'dd/MM/yyyy'}} </div> </body> <script> var app = angular.module('myApp',[]); app.controller('myController',($scope) => { $scope.date = Date.now(); console.log($scope.date); }); </script> </html>Resultado ao imprimir no navegador:
Vemos que os dados da camada javascript são timestamp representando a hora atual enquanto estamos escrevendo o código de acordo com o timestamp UNIX, mas ao imprimir a interface, graças ao mecanismo de filtro do angularJS, imprimimos o valor da data.
Além disso, o filtro data tem muitas opções para ajudá-lo a realizar diferentes formatos, leia os documentos para entender mais.
Minúsculas e maiúsculas
Este filtro é usado para filtrar dados e reformatá-los para uma string minúscula ou maiúscula
{{expression | lowercase}} {{expression | uppercase}}Filtro de pesquisa
Os filtros são usados para localizar dados em uma lista, o que é bastante conveniente, veja o exemplo abaixo para entender melhor o problema:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search filter</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <input type="text" ng-model="search" placeholder="Search"> <table> <tr ng-repeat="x in listUser | filter:search"> <td> {{x.name}} </td> <td> {{x.age}} </td> </tr> </table> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', ($scope) => { $scope.listUser = [ { name: "toan", age: 20 }, { name: "huy", age: 21 }, { name: "hieu", age: 22 }, { name: "toan", age: 34 }, ]; }); </script> </html>Interface ao imprimir no navegador
Filtros personalizados (filtros autodefinidos)
Se os filtros internos não forem suficientes para usar, podemos definir completamente uma diretiva personalizada para filtrar como quisermos. Sintaxe para inicializar o filtro personalizado:
app.filter('filtername',function(){});No exemplo abaixo, crio um filtro com o filtro usado para o formato de moeda VND
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{price | vndFilter}} </div> </body> <script> var app = angular.module('myApp', []); app.filter('vndFilter', function () { return function (x) { x = x.toString().replace(/B(?=(d{3})+(?!d))/g, ','); // convert float to string decimal thousand separator x += ' VND'; // concat with VND return x; }; }) app.controller('myController', function ($scope) { $scope.price = 5000000; }); </script> </html>Resultados quando exibidos no navegador
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
