Filtro personalizado AngularJS con ejemplo

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 scope, pero no queremos que la cadena se muestre tal como es.

Queremos asegurarnos de que cada vez que mostramos la cadena, pasamos un filtro personalizado que agregará otra cadena y mostrará la cadena completada al usuario.

Explicación del código:

  1. Aquí estamos pasando una cadena “Angular” en una variable miembro llamada tutorial y adjuntarla al objeto ámbito.
  2. Angular proporciona el servicio de filtro que se puede utilizar para crear nuestro filtro personalizado. El ‘Demofilter’ es un nombre dado a nuestro filtro.
  3. Esta es la forma estándar en la que se define un filtro personalizado donde 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 anexando la cadena “Tutorial” a esto.
  4. Estamos utilizando nuestro Demofilter en nuestra variable miembro que se pasó del controlador a la vista.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Se puede ver que nuestro filtro personalizado ha sido aplicado y
  • La palabra ‘Tutorial’ se ha añadido al final de la cadena, que se pasó en el tutorial variable miembro.

Resumen:

Si hay 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.a

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *