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
