Às vezes, os filtros integrados do Angular não atendem às necessidades ou requisitos de filtragem de saída. Nesse caso, um filtro personalizado pode ser criado para passar a saída da maneira necessária.
Como criar um filtro personalizado
No exemplo abaixo, vamos passar 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 que anexará outra string e mostrará a string completa para o usuário.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Explicação do código:
- Aqui estamos passando uma string "Angular" em uma variável de membro chamada tutorial e anexando-a ao objeto de escopo.
- O Angular fornece o serviço de filtro que pode ser usado para criar nosso filtro personalizado. O 'Demofilter' é o nome dado ao nosso filtro.
- Esta é a forma padrão em que um filtro personalizado é definido, em que 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 visão para o filtro e anexamos a ela a string "Tutorial".
- 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 êxito, a seguinte saída será exibida quando você executar o código no navegador.
Resultado:
Da saída,
- Pode-se ver que nosso filtro personalizado foi aplicado e
- A palavra 'Tutorial' foi acrescentada no final da string, que foi passada no tutorial de variável de membro.
Resumo:
Se houver um requisito que não seja atendido por nenhum dos filtros definidos no angular, você pode criar seu filtro personalizado e adicionar seu código personalizado para determinar o tipo de saída que deseja do filtro.