Filtros AngularJS e filtro personalizado AngularJS com exemplo
James Hartmann
⚡ Resumo Inteligente
Em AngularJS, um filtro formata o valor de uma expressão para exibição sem alterar os dados subjacentes. Os filtros integrados abrangem maiúsculas e minúsculas, números, moedas e JSON, enquanto um filtro personalizado lida com qualquer regra de formatação que o framework não forneça.
O que é filtro no AngularJS?
A Filtrar em AngularJS Ajuda a formatar o valor de uma expressão para exibição ao usuário sem alterar o valor original. Por exemplo, se você quiser que uma string seja exibida em minúsculas ou maiúsculas, pode fazer isso usando filtros. Filtros integrados, como 'minúsculas' e 'maiúsculas', retornam a string no formato solicitado, e existem outros filtros para números, moedas e JSON.
⚠️ Nota de versão: O AngularJS (versão 1.x) chegou ao fim de seu ciclo de vida em 31 de dezembro de 2021 e não receberá mais atualizações de segurança. Todas as informações abaixo permanecem válidas para a manutenção de aplicações AngularJS existentes; no Angular moderno, a mesma função é desempenhada por um pipe.
Os filtros são aplicados na visualização com o caractere de barra vertical (|). Antes de analisar cada um deles, é útil saber por que você escreveria o seu próprio.
Filtro de letras minúsculas em AngularJS
Este filtro recebe uma string e exibe todos os seus caracteres em letras minúsculas.
Abaixo, um controlador envia uma string para a visualização através do objeto de escopo, e um filtro a converte para minúsculas.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Explicação
- A string em maiúsculas e minúsculas “Angular JS” é colocada em uma variável membro chamada
tutorialNameno objeto de escopo. - O símbolo de filtro (|) marca a saída para transformação, e o
lowercaseA palavra-chave aplica o filtro integrado que transforma toda a string em minúsculas.
⚠️ Correções aplicadas a todos os anúncios. Todos os seis exemplares originais compartilhavam três defeitos. chrset="UTF 8" não é um atributo ou codificação válido e agora é charset="UTF-8". angular-route.js carregado antes angular.min.js, que gerava um erro de módulo e nunca foi usado — foi removido, assim como a referência não utilizada ao jQuery. O texto também afirmava que o valor era “AngularJS”, enquanto o código definia “Angular JS”; o texto agora corresponde.
Saída:
A sequência de caracteres com letras maiúsculas e minúsculas misturadas é renderizada inteiramente em minúsculas. A transformação inversa funciona da mesma maneira.
Filtro de maiúsculas em AngularJS
Este filtro é o oposto do filtro de letras minúsculas, exibindo todos os caracteres em maiúsculas.
Abaixo, um controlador envia uma string para a visualização através do objeto de escopo, e um filtro a converte para maiúsculas.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Explicação
- A string em maiúsculas e minúsculas “Angular JS” é colocada em
tutorialNamee anexado ao objeto de escopo. - O símbolo de filtro (|) é seguido pelo
uppercasepalavra-chave, portanto o filtro integrado renderiza toda a string em maiúsculas.
⚠️ Correção: O texto original introduziu esta seção como "um exemplo de filtro de maiúsculas do AngularJS com a opção de minúsculas", o que está errado em ambos os sentidos. Esta seção demonstra o filtro de maiúsculas, e o AngularJS não possui nenhum filtro de maiúsculas — capitalizar apenas a primeira letra requer um filtro personalizado, cuja criação será mostrada nas seções posteriores.
Saída:
Os filtros de maiúsculas e minúsculas não recebem argumentos. O próximo filtro mostra como os dois pontos passam um parâmetro para um filtro.
Filtro de número em AngularJS
Este filtro formata um número e pode limitar a quantidade de casas decimais exibidas.
O exemplo abaixo usa o filtro de número para exibir um valor restrito a duas casas decimais. Um controlador envia o número para a visualização por meio do objeto de escopo, e o filtro é aplicado na visualização.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Explicação
- Um número com muitas casas decimais é armazenado em uma variável membro chamada
tutorialIDe anexado ao objeto de escopo. - O símbolo de filtro (|) é seguido por
number:2Os dois pontos passam um argumento e o 2 define duas casas decimais. O valor é arredondado para exibição, portanto 3.565656 aparece como 3.57, embora o escopo mantenha o número inteiro.
Saída:
Formatar um número simples geralmente não é suficiente quando o valor representa dinheiro, que é o que o próximo filtro trata.
Filtro de moeda em AngularJS
Este filtro formata um número como um valor monetário, prefixando-o com um símbolo de moeda, como $.
No exemplo abaixo, um controlador envia um número para a visualização por meio do objeto de escopo, e o filtro de moeda é aplicado na visualização.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Explicação
- Um número é colocado em uma variável membro chamada
tutorialpricee anexado ao objeto de escopo. - O símbolo de filtro (|) é seguido pelo
currencyfiltro.
⚠️ Correção: O texto original afirmava que a moeda "depende das configurações de idioma aplicadas à máquina". Isso não é verdade. O AngularJS usa a localidade incluída na biblioteca, en-US por padrão, portanto o símbolo é $ independentemente do sistema operacional. Carregue a versão correspondente. angular-locale_*.js arquivo, ou passe o símbolo diretamente: {{tutorialprice | currency:"£"}}.
Saída:
Cadeias de caracteres e números são valores simples. O filtro integrado final lida com objetos inteiros.
Filtro JSON em AngularJS
Este filtro converte um objeto em um formato definido. JSON string, que é útil para inspecionar dados de escopo durante o desenvolvimento.
No exemplo abaixo, um controlador envia um objeto para a visualização por meio do objeto de escopo, e o filtro JSON é aplicado na visualização.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Explicação
- Um objeto segurando
TutorialID: 12etutorialName: "Angular"é colocado em uma variável membro chamadatutoriale anexado ao objeto de escopo. - O símbolo de filtro (|) é seguido pelo
jsonfiltro, que serializa o objeto em texto JSON com recuo.
⚠️ Correção: O texto original descrevia esse valor como “um número” e como “uma string do tipo JSON”. Não é nenhum dos dois. É um JavaO objeto Script e o filtro JSON são responsáveis por convertê-lo em uma string JSON para exibição.
Saída:
Esses cinco filtros abrangem os casos mais comuns. Quando nenhum deles produzir o resultado desejado, você poderá criar o seu próprio.
Filtro personalizado AngularJS
Às vezes, os filtros integrados do AngularJS não atendem aos requisitos de formatação da saída. Nesses casos, é possível criar um filtro personalizado do AngularJS que retorne a saída da maneira desejada.
Um filtro personalizado é registrado em um módulo e, em seguida, comporta-se exatamente como um filtro integrado. As seções a seguir abordam primeiro os filtros padrão, já que um filtro personalizado usa a mesma sintaxe de pipe, e depois mostram como criar um.
Como criar filtro personalizado em AngularJS
No exemplo abaixo, uma string passa do controlador para a visualização através do objeto de escopo, mas não deve ser exibido como está. Um filtro personalizado em AngularJS Acrescenta outra string e exibe o resultado final.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Explicação
- A string “Angular” é colocada em uma variável membro chamada
tutoriale anexado ao objeto de escopo. - O AngularJS fornece o
filterMétodo de registro usado para criar um filtro personalizado. 'Demofilter' é o nome atribuído a ele, e é a esse nome que a visualização se refere. - Este é o formato padrão de um filtro personalizado: a função registrada é um fábrica retornando a função que realiza o trabalho. Essa função recebe o valor que está sendo filtrado como seu primeiro parâmetro e retorna o resultado — neste caso, a entrada com "Tutorial" anexado.
- O filtro é aplicado na visualização usando a mesma sintaxe de pipe que qualquer filtro integrado.
💡 Dica: Os nomes de filtros são convencionalmente escritos em minúsculas ou camelCase. 'Demofilter' funciona, mas um nome como appendTutorial A leitura fica mais agradável e evita conflitos com nomes predefinidos.
Saída:
A palavra 'Tutorial' foi adicionada à string passada como argumento. tutorial variável. Este filtro sempre acrescenta o mesmo texto, cuja configuração será definida na próxima seção.
Como passar argumentos para um filtro personalizado
O filtro acima codifica o texto que anexa, portanto, só pode fazer uma coisa. Filtros integrados como number:2 Aceita um argumento após dois pontos, e um filtro personalizado também pode: cada parâmetro após o primeiro corresponde a um argumento separado por dois pontos na visualização.
O processo envolve três etapas: adicionar parâmetros depois input Na função retornada, forneça um valor padrão para qualquer item opcional, para que o filtro ainda funcione quando o argumento for omitido. Em seguida, passe os argumentos na visualização, separados por dois pontos.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
A visualização passa a ser a seguinte, onde “Tutorial” se torna suffix e o hífen se torna separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Dois detalhes são fáceis de passar despercebidos. Os argumentos são expressões do AngularJS, portanto, uma string literal deve ser colocada entre aspas, enquanto uma palavra sem aspas é lida como uma propriedade de escopo. Os filtros também são encadeados, cada um recebendo a saída do anterior: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Atenção: Mantenha um filtro puro — mesma saída para a mesma entrada, sem alterações externas. O AngularJS armazena em cache um filtro puro e o executa novamente apenas quando a entrada muda. Um filtro que lê o relógio ou modifica um serviço deve ser marcado. $stateful, que desativa esse cache e executa o filtro a cada ciclo de digestão, uma causa comum de páginas lentas.
Os filtros não se restringem a modelos. O mesmo filtro pode ser chamado a partir de JavaRoteiro, conforme mostrado a seguir.
Como usar filtros em um controlador com o serviço $filter
Aplicar um filtro na view é o caso mais comum, mas o valor transformado às vezes é necessário dentro do controller, por exemplo, antes de enviar dados para um servidor. O AngularJS expõe todos os filtros registrados, tanto os integrados quanto os personalizados, através do $filter serviço. Injete-o, chame-o com o nome do filtro para recuperar a função de filtro e, em seguida, invoque-a com o valor e quaisquer argumentos.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Existe também uma forma mais curta: injetar o nome do filtro seguido de Filter, como uppercaseFilter, fornece a função de filtro diretamente e pode ser chamada imediatamente. Ambas as formas resultam na mesma função, portanto a escolha é estilística.
Dois usos surgem repetidamente. O primeiro é a preparação de uma carga útil: normalmente, uma data precisa chegar a uma API seguindo um padrão fixo, e $filter('date')(value, 'yyyy-MM-dd') produz o valor sem alterar o valor vinculado ao formulário. A segunda opção consiste em restringir uma coleção uma única vez no controlador, em vez de deixá-la como está. orderBy num ng-repetir expressão onde ela é executada novamente a cada resumo.
Os filtros injetados dessa forma ainda são registrados no módulo, portanto, um filtro personalizado deve ser declarado com app.filter antes que qualquer controlador pergunte $filter Caso contrário, o AngularJS gera um erro de provedor desconhecido.
Chamando um filtro em JavaUm script difere de um modelo em um aspecto importante: o resultado é calculado uma única vez e armazenado no escopo, em vez de ser recalculado a cada digest. Isso o torna a opção mais rápida para um valor que raramente muda e a opção errada para um que precisa mudar. track entrada do usuário.
