Filtros Personalizados en AngularJS

0
12104

En este tutorial vamos a aprender a ir más allá de los filtros básicos que nos ofrece el framework AngularJS y vamos a crear nuestro propio filtro.
Este se puede considerar una segunda parte del que realicé hace varios meses sobre una introducción básica a los filtros de AngularJS.

Para crear un filtro en AngularJS, al igual que creamos controladores poniendo el nombre del módulo seguido de controller. ahora pondremos el nombre del módulo seguido de filter y el nombre del filtro de esta forma.

    app.filter(‘nombreDelFiltro’, function(){});

Vamos a comenzar con un filtro que nos filtre una lista de países por un continente concreto.

Teniendo una lista de países de esta forma:

    $scope.paises = [
        {nombre: 'Francia', continente : 'Europa'},
        {nombre: 'China', continente : 'Asia'},
        {nombre: 'Canada', continente : 'America'},
        {nombre: 'Marruecos', continente: 'Africa'},
        {nombre: 'Suecia', continente: 'Europa'},
        {nombre: 'Chile', continente: 'America'}
    ];

Podemos crear el filtro que deseamos de la siguiente forma:

    app.filter(‘filtroPais’, function() {
        return function(input) {
            var salida = [];
            angular.forEach(input, function(pais) {
                if (pais.continente === 'Europa') {
                salida.push(pais)
                }
            })
            return salida;
        }
    });

Algunos detalles importantes que se pueden observar en el filtro son:

  • El nombre del módulo es app
  • El nombre del filtro es continente
  • El filtro tiene un parámetro obligatorio de entrada llamado input

El funcionamiento es sencillo. Los elementos de la lista que cumplan la propiedad pais.continente === ‘Europa’ se añadirán a una lista que se devolverá.

En nuestra web, es sencilla su utilización.

    
  • {{pais.name}}

Con esto podríamos observar Francia y Suecia.

Vamos a mejorar la reusabilidad del filtro un poco mas. Este filtro no tiene mucha utilidad, ya que siempre filtra por Europa, por lo que vamos a parametrizar el continente del que deseamos obtener los países.

Los filtros requieren de un parámetro en la función obligatorio, pero también permiten n parámetros adicionales que son opcionales. Vamos a añadirle el parámetro continente a nuestro filtro.

    app.filter(‘filtroPais’, function() {
        return function(input, continente) {
            var salida = [];
            angular.forEach(input, function(pais) {
                if (pais.continente === continente) {
                salida.push(pais)
                }
            })
            return salida;
        }
    });

Y con este fragmento de HTML podemos escribir el continente por el que deseemos filtrar.

    

    
  • {{pais.name}}

A partir de aquí ya podéis seguir sólos. Como véis los filtros son una herramienta muy potente que se suelen infrautilizar.

Un saludo,
Samuel Martín

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad