A veces, los filtros integrados en Angular no pueden satisfacer las necesidades o requisitos para filtrar la salida. En tal caso, se puede crear un filtro personalizado que puede pasar la salida de la manera requerida.
Cómo crear un filtro personalizado
En el siguiente ejemplo, vamos a pasar una cadena a la vista desde el controlador a través del objeto de alcance, pero no queremos que la cadena se muestre como está.
Queremos asegurarnos de que cada vez que mostramos la cadena, pasamos un filtro personalizado que agregará otra cadena y mostrará la cadena completa al usuario.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Explicación del código:
- Aquí pasamos una cadena "Angular" en una variable miembro llamada tutorial y la adjuntamos al objeto de alcance.
- Angular proporciona el servicio de filtro que se puede utilizar para crear nuestro filtro personalizado. El 'Demofiltro' es un nombre que se le da a nuestro filtro.
- Esta es la forma estándar en la que se define un filtro personalizado en el que se devuelve una función. Esta función es la que contiene el código personalizado para crear el filtro personalizado. En nuestra función, estamos tomando una cadena "Angular" que se pasa de nuestra vista al filtro y agregando la cadena "Tutorial" a esto.
- Estamos usando nuestro Demofilter en nuestra variable miembro que se pasó del controlador a la vista.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Se puede ver que se ha aplicado nuestro filtro personalizado y
- La palabra 'Tutorial' se ha agregado al final de la cadena, que se pasó en el tutorial de variables miembro.
Resumen:
Si existe un requisito que no cumple ninguno de los filtros definidos en angular, puede crear su filtro personalizado y agregar su código personalizado para determinar el tipo de salida que desea del filtro.