Filtros en AngularJS
Índice de contenidos.
- Introducción
- ¿Cómo se usan los filtros?
- Lowercase / Uppercase
- Currency
- LimitTo
- Date
- Json
- Conclusiones
Introducción
Los filtros son una herramienta que nos proporciona el framework de AngularJS para ahorrarnos trabajo recurrente, al igual que la arquitectura filtro-tubería, permite que dados unos datos de entrada, mediante unos parámetros obtengamos una salida depurada según nuestras necesidades. Ya sean mostrar los datos de un modo que al usuario le resulten más útiles como formatear una fecha, limitar el número máximo de resultados para no sobrecargar una vista de información o cosas tan mundanas como convertir un texto a minúsculas.
¿Cómo se usan los filtros?
Para que un filtro interactue con una expresion simplemente es necesario colocarlo dentro de una doble llave y separarlo de la expresion a filtrar por una barra vertical de esta forma {{expresion | filtro }}
Al igual que en la arquitectura filtro-tubería se pueden encadenar filtros haciendo que la salida de uno pase a la entrada del siguiente y consiguiendo resultados mucho mas complejos con muy poco esfuerzo {{ expresion | filtro1 | filtro2 }}
AngularJS ya nos trae una lista de filtros por defecto para utilizar, vamos a ver algunos de estos:
Lowercase / Uppercase
Este es uno de los mas sencillos, convierte el texto que le pasemos a minúsculas/mayúsculas.
{{expresion | lowercase}}
{{expresion | uppercase}}
El uso de {{ «HoLa MuNDo» | lowercase}} nos mostrará por pantalla «hola mundo»
y el de {{ «HoLa MuNDo» | uppercase}} mostrará «HOLA MUNDO»
Este filtro nos permite desentendernos de cómo están almacenados los datos y mostrarlos como deseamos.
Currency
El filtro currency se utiliza para formatear un número basado en un tipo de moneda, la forma más básica de utilizarlo es sin ningún parámetro, así se consigue la moneda en dolares con el simbolo del dolar precedido al de la cantidad.
{{ 60 | currency }} da como resultado $60.00
Si necesitamos otro tipo de moneda se puede especificar el simbolo para que por ejemplo sea el de euros €
{{ 60 | currency: ‘€’ }} da como resultado €60.00
LimitTo
En ocasiones tenemos una lista muy larga de elementos y queremos mostrar solo parte de ellos, en este caso tenemos el filtro limitTo que solo muestra el número de elementos que le especifiquemos como máximo.
{{ lista | limitTo:5 }} sólo muestra los cinco primeros elementos.
Date
Uno de los más útiles, el formateo de fechas, el usuario no quiere fechas en formatos que no entiende por lo que hay que adecuarla a ellos, este filtro es muy configurable y con muy poco esfuerzo muestra toda la información que el usuario quiere ver.
El uso básico es {{ fecha | date }} la salida será «Feb 28, 2015».
Si quereis una salida específica os recomiendo mirar la documentación oficial https://docs.angularjs.org/api/ng/filter/date
Hay cientos de combinaciones posibles que os permitirá llegar al grado de detalle que quereis.
Json
He dejado este filtro al final para los que habéis llegado hasta este punto 🙂
A veces, normalmente para depurar nuestra aplicación, podria ser necesario (o útil) mostrar los objetos que nos interesen en formato JSON, así podemos ver rápidamente que es lo que está fallando.
Un ejemplo
{{ coche | json}}
El resultado mostrado en el navegador es el siguiente
{
"color": "Rojo",
"fecha": "2010",
"matricula": "12345ZX"
}
Conclusiones
Estos son sólo algunos filtros de los que proporciona por defecto AngularJS, os recomiendo que si os interesa reviséis la documentación oficial donde vienen explicados con detalle y en ocasiones con ejemplos de uso.
Si lo que necesitais es un filtro con un campo de texto que haga que se refresquen los datos a medida que vais escribiendo, necesitáis el filtro «filter». Como alargaría excesivamente este tutorial, os dejo el enlace a su documentación para que el que lo necesite le eche un vistazo.
Un comentario