5.1 Filtros

Por ahora hemos visto varios artefactos en AngularJS:

En esta unidad vamos a ver un nuevo tipo de artefacto de AngularJS los filtros

Los filtros permiten modificar como se muestran los datos en la página HTML. Ejemplos de ello es como se muestran las fechas, los números, como ordenar listas, etc.

Existen 2 tipos de filtros según a que tipo de datos se aplican:

Los filtros se usan añadiendo al valor a mostrar el caracter de tubería | y luego el nombre del filtro y sus opciones.

{{valor | filtro:opciones }}

Veamos ahora un ejemplo:

<div>{{importe | number:2}}</div>

En este ejemplo al mostrar la variable importe que es de tipo numérico se aplica un filtro que limita el número de decimales a mostrar a 2 decimáles.

Se pueden aplicar varios filtro distintos concatenando mas tuberías y el nombre del siguiente filtro. El siguiente ejemplo muestra 3 filtros:

{{valor | primerFiltro | segundoFiltro | tercerFiltro }}

El signo de los dos puntos y opciones solo se pondrán si el filtro correspondiente necesita de parámetros para funcionar. En caso de que haya mas de un parámetro se separarán por comas.

Un ejemplo de parámetro es en el filtro date para especificar el formato de la fecha a mostrar.

Referencias