Como criar filtros personalizados no AngularJS?

Você já usou filtros com a diretiva ng-repeat, conforme mostrado na lista abaixo?

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

Nesse caso, você usou um filtro em um aplicativo AngularJS. O AngularJS nos fornece muitas diretivas embutidas, como pesquisa. Se necessário, o AngularJS também nos permite criar filtros personalizados, que exploraremos neste post.

O AngularJS nos dá uma API simples para criar um filtro personalizado. Você deve se lembrar que usamos app.controller() para criar controladores e app.module() para criar módulos. Exatamente da mesma forma, o AngularJS nos deu a API angular.filter para criar um filtro personalizado no AngularJS.

Um filtro personalizado pode ser criado usando a seguinte sintaxe:

Para criar um filtro personalizado, você precisa executar as seguintes etapas:

• Crie um filtro usando o app.filter passando um nome de filtro personalizado e uma função como parâmetros de entrada para o app.filter()
• App.filter() will return a function
• A função retornada pode receber vários parâmetros de entrada opcionais
• A função retornada terá um código de filtro personalizado e retornará a saída.

Vamos começar criando um filtro personalizado muito simples. Podemos aplicar esse filtro personalizado em uma string e ele retornará a string com cada caractere em maiúsculas.

MyApp.filter('toUpperCase', function () {
    return function (input)
    {
        var output = "";       
        output = input.toUpperCase();
        return output;
    }
})

Podemos usar o filtro personalizado toUpperCase na visualização, conforme mostrado na listagem abaixo:

<div ng-controller="ProductController">
     <table class="table">              
         <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toUpperCase}}</td>
             <td>{{a.price}}</td>
         </tr>
     </table>
</div>

Precisamos ter em mente que o nome do filtro personalizado diferencia maiúsculas de minúsculas. A exibição criada acima está lendo dados do controlador, conforme mostrado na listagem abaixo:

MyApp.controller("ProductController", function ($scope) {
    $scope.products = [
		{ 'name': 'pen', 'price': '200' },

		{ 'name': 'pencil', 'price': '400' },

		{ 'name': 'book', 'price': '2400' },

		{ 'name': 'ball', 'price': '400' },

		{ 'name': 'eraser', 'price': '1200' },
    ];
})

Agora vamos obter o nome do produto renderizado em maiúsculas na exibição, conforme mostrado na imagem abaixo:

MyApp.filter('toPositionUpperCase', function () {
 
    return function (input,position)
    {
        var output = [];       
        var capLetter = input.charAt(position).toUpperCase();
        for (var i = 0; i < input.length; i++) {
 
            if (i == position) {
                output.push(capLetter);
            } else {
                output.push(input[i]);
            }
 
        }
        output = output.join('');
        return output;
    }
})

Podemos usar o filtro personalizado toPositionUpperCase na visualização, conforme mostrado na listagem abaixo. Como você notará, estamos passando o parâmetro de entrada para o filtro personalizado usando os dois pontos.

<div ng-controller="ProductController">
    <table class="table">              
        <tr ng-repeat="a in products|filter:searchTerm">
             <td>{{a.name|toPositionUpperCase:1}}</td>
            <td>{{a.price}}</td>
        </tr>
    </table>
</div>

Obteremos a segunda letra do nome do produto renderizada em maiúsculas na exibição, conforme mostrado na imagem abaixo:

Antes de concluirmos este artigo, vamos criar um filtro personalizado que será aplicado na coleção de itens. Digamos que, da lista de produtos, queremos filtrar todos os produtos maiores que um determinado preço. Podemos escrever este filtro personalizado conforme mostrado na lista abaixo:

MyApp.filter('priceGreaterThan', function () {
 
    return function (input, price) {
        var output = [];
        if (isNaN(price)) {
 
            output = input;
        }
        else {
            angular.forEach(input, function (item) {
 
                if (item.price > price) {
                    output.push(item)
                }
            });
        }
        return output;
    }
})

Podemos usar o filtro personalizado na visualização, conforme mostrado na listagem abaixo. Estamos passando o parâmetro price da caixa de texto do tipo de entrada.

<h1>With Custom Filter</h1>
       
<div ng-controller="ProductController">
   <input type="number" class="form-control" placeholder="Search here" ng-model="priceterm" />
   <br/>
   <table class="table">
       <tr ng-repeat="b in products|priceGreaterThan:priceterm">
           <td>{{b.name}}</td>
           <td>{{b.price}}</td>
       </tr>
   </table>
</div>

Com isso, obteremos uma matriz filtrada na visualização, conforme mostrado na imagem abaixo:

Então aí está - é assim que se cria um filtro personalizado! É fácil – eles não são nada além de funções que recebem uma entrada e parâmetros opcionais para retornar uma função. Espero que tenham gostado de ler!

Forneça aplicativos da Web modernos e responsivos sem limites de navegadores, dispositivos e plataformas com Infragistics controles jQuery e HTML5. Baixe o Teste Gratuito agora e veja seu poder em ação!