O que é filtro no AngularJS?
Um filtro em AngularJS ajuda a formatar o valor de uma expressão para exibir ao usuário sem alterar o formato original. Por exemplo, se você quiser que sua string seja minúscula ou maiúscula, você pode fazer isso usando filtros. Existem filtros integrados, como 'minúsculas' e 'maiúsculas', que podem recuperar a saída em minúsculas e maiúsculas de acordo.
Da mesma forma, para números, você pode usar outros filtros.
Durante este tutorial, veremos os diferentes filtros integrados padrão disponíveis no Angular.
Neste tutorial, você aprenderá-
- Filtro de minúsculas em AngularJS
- Filtro de maiúsculas em AngularJS
- Filtro de número em AngularJS
- Filtro de moeda em AngularJS
- Filtro JSON em AngularJS
Filtro de minúsculas em AngularJS
Este filtro assume uma saída de string e formata a string e exibe todos os caracteres na string como minúsculos.
Vejamos um exemplo de filtros AngularJS com a opção AngularJS tolowercase.
No exemplo a seguir, usaremos um controlador para enviar uma string para uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para converter a string em minúsculas.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Explicação do código:
- Aqui, estamos passando uma string, que é uma combinação de caracteres minúsculos e maiúsculos em uma variável de membro chamada "tutorialName" e anexando-a ao objeto de escopo. O valor da string que está sendo passada é "AngularJS".
- Estamos usando a variável de membro "tutorialName" e colocando um símbolo de filtro (|), o que significa que a saída precisa ser modificada usando um filtro. Em seguida, usamos a palavra-chave em minúsculas para dizer para usar o filtro embutido para produzir a string inteira em minúsculas.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída
- Pode-se observar que foi executada a string "AngularJS" que foi passada na variável tutorialName que era uma combinação de caracteres minúsculos e maiúsculos.
- Após a execução, a saída final é em minúsculas, conforme mostrado acima.
Filtro de maiúsculas em AngularJS
Este filtro é semelhante ao filtro de minúsculas; a diferença é que assume uma saída de string e formata a string e exibe todos os caracteres na string em maiúsculas.
Vejamos um exemplo de filtro de letras maiúsculas AngularJS com a opção de letras minúsculas.
No exemplo de capitalização de AngularJS abaixo, usaremos um controlador para enviar uma string para uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para converter a string em maiúsculas.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Explicação do código:
- Aqui estamos passando uma string que é uma combinação de caracteres minúsculos e maiúsculos "Angular JS" em uma variável de membro chamada "tutorialName" e anexando-a ao objeto de escopo.
- Estamos usando a variável de membro "tutorialName" e colocando um símbolo de filtro (|), o que significa que a saída precisa ser modificada usando um filtro. Em seguida, usamos a palavra-chave em maiúsculas para dizer para usar o filtro embutido para produzir a string inteira em maiúsculas.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
- Pode-se ver que a string passada na variável tutorialName, que era uma combinação de caracteres minúsculos e maiúsculos, foi emitida em maiúsculas.
Filtro de número em AngularJS
Este filtro formata um número e pode aplicar um limite às casas decimais para um número.
Vejamos um exemplo de filtros AngularJS com a opção de número.
No exemplo abaixo,
Queríamos mostrar como podemos usar o filtro de número para formatar um número a ser exibido com uma restrição de 2 casas decimais.
Usaremos um controlador para enviar um número a uma visão por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para aplicar o filtro de número.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Explicação do código:
- Aqui, estamos passando um número com um número maior de casas decimais em uma variável de membro chamada tutorialID e anexando-o ao objeto de escopo.
- Estamos usando a variável membro tutorialID e colocando um símbolo de filtro (|) junto com o filtro de número. Agora em número: 2, o dois indica que o filtro deve restringir o número de casas decimais a 2.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
- Pode-se verificar que o número que foi passado na variável tutorialID que possuía um grande número de casas decimais foi limitado a 2 casas decimais devido ao número: 2 filtros que foram aplicados.
Filtro de moeda em AngularJS
Este filtro formata um filtro de moeda para um número.
Suponha que, se você quiser exibir um número com uma moeda como $, este filtro pode ser usado.
No exemplo a seguir, usaremos um controlador para enviar um número a uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para aplicar o filtro atual.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Explicação do código:
- Aqui, estamos passando um número em uma variável de membro chamada tutorialprice e anexando-o ao objeto de escopo.
- Estamos usando a variável membro tutorialprice e colocando um símbolo de filtro (|) junto com o filtro de moeda. Observe que a moeda aplicada depende das configurações de idioma aplicadas à máquina.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída
- Pode-se observar que o símbolo da moeda foi anexado ao número que foi passado na variável tutorialprice.
- No nosso caso, como as configurações de idioma são inglês (Estados Unidos), o símbolo $ é inserido como a moeda.
Filtro JSON em AngularJS
Este filtro formata uma entrada como JSON e aplica o filtro JSON AngularJS para fornecer a saída em JSON.
No exemplo a seguir, usaremos um controlador para enviar um objeto do tipo JSON para uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para aplicar o filtro JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Explicação do código:
- Aqui, estamos passando um número em uma variável de membro chamada "tutorial" e anexando-o ao objeto de escopo. Esta variável de membro contém uma string do tipo JSON de Tutorial ID: 12 e TutorialName: "Angular".
- Estamos usando o tutorial de variável de membro e colocando um símbolo de filtro (|) junto com o filtro JSON.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
- Pode-se ver que o JSON, como uma string, é analisado e exibido um objeto JSON adequado no navegador.
Resumo:
- Filtros são usados para alterar a forma como a saída é exibida para o usuário.
- O Angular fornece filtros integrados, como os filtros de minúsculas e maiúsculas, para alterar a saída das strings para maiúsculas e minúsculas, respectivamente.
- Também existe uma disposição para alterar a maneira como os números são exibidos usando o filtro de número, especificando o número de casas decimais a serem exibidas no número.
- Também é possível usar o filtro de moeda para anexar o símbolo da moeda a qualquer número.
- Se houver um requisito para ter uma saída específica de json, o angular também fornece o filtro JSON para filtrar qualquer string semelhante a JSON para o formato JSON.