¡Esta es una revisión vieja del documento!
En este tema vamos a ver como crear filtros personalizados. Crear un nuevo filtro es casi tan sencillo como crear una función a la que le pasamos un valor y ésta retorna el nuevo valor con el filtro aplicado.
La forma de crear un filtro es llamando al método filter
de un módulo. Este método acepta una función de factoría. Siendo la función de factoría la que retornará nuestra función de filtro.
Veamos un ejemplo muy simple. Vamos a volver a crear el filtro de pasar a mayúsculas.
Lo primero es crear la función que hace de filtro
function mayusculasFilter(valor) { if (typeof (valor)==="string") { return valor.toUpperCase(); } else { return valor; } }
mayusculasFilter
. Y como único parámetro acepta el valor que transformaremos en mayúsculas.Vemos como es muy sencilla la función , aunque lo único a recordar es que nos pueden pasar el filtro con cualquier valor , así que debemos comprobar el tipo de lo que nos han pasado.
Ahora toca definir la función de factoría que retorna la función del filtro.
function mayusculasFilterFactory() { return mayusculasFilter; }
Al igual que con los servicio factory, es que sea una función de factoría nos permite inicializaciones complejas del filtro.
Por último nos queda definir el filtro en AngularJS
app.filter("mayusculas",mayusculasFilterFactory);Ahora simplemente le decimos a AngularJs el nombre real del filtro y el nombre de la función de factoría. Vemos que son 3 pasos y puede parece un poco largo, pero asi queda muy claro la función de cada uno.
El código completo del filtro lo podemos ver ahora:
function mayusculasFilter(valor) { if (typeof (valor)==="string") { return valor.toUpperCase(); } else { return valor; } } function mayusculasFilterFactory() { return mayusculasFilter; } app.filter("mayusculas",mayusculasFilterFactory);
Ya que la función de factoría es tan simple se podría poner como una función anónima al definir el filtro:
function mayusculasFilter(valor) { if (typeof (valor)==="string") { return valor.toUpperCase(); } else { return valor; } } app.filter("mayusculas",function () { return mayusculasFilter; });
Por último en muchos ejemplos de creación de filtros se hace todo con funciones anónimas:
app.filter("mayusculas",function () { return function (valor) { if (typeof (valor)==="string") { return valor.toUpperCase(); } else { return valor; } }; });
El motivo de esa es que con tanta función anónima al final te lías un poco: Así que donde está lo importante es la función del filtro por eso la hacemos de forma independiente. Y como la función de factoría es muy simple la ponemos como función anónima
Un motivo para tener una función factoría que retorna el propio filtro es que podemos inyectar servicio en la función de factoría.
Vamos a modificar el ejemplo para que se genere un log al crear el filtro usando el servicio de $log
de AngularJS.
function mayusculasFilter(valor) { if (typeof (valor)==="string") { return valor.toUpperCase(); } else { return valor; } } app.filter("mayusculas",['$log',function ($log) { $log.log("Creando el filtro"); return mayusculasFilter; }]);
$log
.$log
dentro de la factoría.Ahora vamos a hacer que un array se pasen sus elementos a mayúsculas, siempre que el elemento sea un String.
Podríamos pensar que tenemos que hacer un nuevo filtro para soportar array pero nada impide que usemos el mismo filtro que antes para tratar también los Arrays.