Filtros AngularJS e filtro personalizado AngularJS com exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

O que é filtro no AngularJS?

A Filtrar em AngularJS ajuda a formatar o valor de uma expressão para exibir ao usuário sem alterar o formato original. Por exemplo, se quiser que sua string esteja em letras minúsculas ou maiúsculas, você pode fazer isso usando filtros. Existem filtros integrados, como 'minúsculas', 'maiúsculas', que podem recuperar a saída em minúsculas e maiúsculas de acordo.

Filtro personalizado AngularJS

Às vezes, os filtros integrados no Angular não atendem às necessidades ou requisitos de filtragem de saída. Nesse caso, um filtro personalizado AngularJS pode ser criado, que pode passar a saída da maneira necessária.

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.

Como criar filtro personalizado em AngularJS

No exemplo de filtro personalizado AngularJS abaixo, passaremos uma string para a visualização do controlador por meio do objeto de escopo, mas não queremos que a string seja exibida como está.

Queremos garantir que sempre que exibirmos a string, passaremos um filtro personalizado em AngularJS, que anexará outra string e exibirá a string completa para o usuário.

Crie filtro personalizado em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Code Explicação

  1. Aqui estamos passando uma string “Angular” em uma variável de membro chamada tutorial e anexando-a ao objeto de escopo.
  2. Angular fornece o serviço de filtro que pode ser usado para criar nosso filtro personalizado. O 'Demofiltro' é o nome dado ao nosso filtro.
  3. Esta é a maneira padrão pela qual os filtros personalizados no AngularJS são definidos onde uma função é retornada. Esta função é o que contém o código personalizado para criar o filtro personalizado. Em nossa função, pegamos uma string “Angular” que é passada de nossa visualização para o filtro e anexamos a string “Tutorial” a ela.
  4. Estamos usando nosso Demofilter em nossa variável de membro que foi passada do controlador para a visualização.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Crie filtro personalizado em AngularJS

Da saída,

  • Pode-se ver que nosso filtro personalizado foi aplicado e
  • A palavra 'Tutorial' foi anexada ao final da string, que foi passada na variável de membro tutorial.

ARTIGOS RELACIONADOS

Filtro de letras minúsculas em AngularJS

Este filtro assume uma saída de string e formata a string e exibe todos os caracteres da string em letras minúsculas.

Vejamos um exemplo de filtros AngularJS com a opção AngularJS para letras minúsculas.

No exemplo 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 minúsculas.

Filtro de letras minúsculas em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Code Explicação

  1. 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”.
  2. 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 minúscula para dizer para usar o filtro integrado para gerar a string inteira em minúsculas.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Filtro de letras minúsculas em AngularJS

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 fica em letras minúsculas, conforme mostrado acima.

Filtro de maiúsculas em AngularJS

Este filtro é semelhante ao filtro de letras minúsculas; a diferença é que assume uma saída de string e formata a string e exibe todos os caracteres da string em letras maiúsculas.

Vejamos um exemplo de filtro de capitalização AngularJS com a opção de letras minúsculas.

No exemplo de letras maiúsculas do 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.

Filtro de maiúsculas em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Code Explicação

  1. 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.
  2. Estamos usando a variável 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 maiúscula para usar o filtro integrado para gerar a string inteira em maiúsculas.

Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Filtro de maiúsculas em AngularJS

Da saída,

  • Pode-se observar que a string que foi passada na variável tutorialName que era uma combinação de caracteres minúsculos e maiúsculos foi gerada em letras maiúsculas.

Filtro de número em AngularJS

Este filtro formata um número e pode aplicar um limite às casas decimais de 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 numérico para formatar um número a ser exibido com uma restrição de 2 casas decimais.

Usaremos um controlador para enviar um número para uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para aplicar o filtro numérico.

Filtro de número em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Code Explicação

  1. 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.
  2. Estamos usando a variável de membro tutorialID e colocando um símbolo de filtro (|) junto com o filtro numérico. 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 sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Filtro de número em AngularJS

Da saída,

  • Percebe-se 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 foi aplicado.

Filtro de moeda em AngularJS

Este filtro formata um filtro de moeda para um número.

Suponha que, se você deseja exibir um número com uma moeda como $, esse filtro pode ser usado.

No exemplo abaixo, usaremos um controlador para enviar um número para uma visualização por meio do objeto de escopo. Em seguida, usaremos um filtro na visualização para aplicar o filtro atual.

Filtro de moeda em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Code Explicação

  1. Aqui estamos passando um número em uma variável de membro chamada tutorialprice e anexando-o ao objeto de escopo.
  2. Estamos usando a variável de 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 sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Filtro de moeda em AngularJS

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 moeda.

Filtro JSON em AngularJS

Este filtro formata um JSON como entrada e aplica o filtro AngularJS JSON para fornecer a saída em JSON.

No exemplo abaixo, 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.

Filtro JSON em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Code Explicação

  1. 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”.
  2. 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 sucesso, a seguinte saída será mostrada quando você executar o código no navegador.

Saída:

Filtro JSON em AngularJS

Da saída,

  • Pode-se ver que o JSON como uma string é analisado e exibido como um objeto JSON adequado no navegador.

Resumo

  • Os filtros são usados ​​para alterar a forma como a saída é exibida ao usuário.
  • Angular fornece filtros integrados, como filtros de letras minúsculas e maiúsculas, para alterar a saída das strings para minúsculas e maiúsculas, respectivamente.
  • Também existe a possibilidade de alterar a forma como os números são exibidos usando o filtro de números, 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 JSON, angular também fornece o filtro JSON para filtrar qualquer string semelhante a JSON no formato JSON.
  • Se houver um requisito que não seja atendido por nenhum dos filtros definidos em angular, você poderá criar seu filtro personalizado e adicionar seu código personalizado para determinar o tipo de saída desejada do filtro.

Resuma esta postagem com: