Muestra las diferencias entre dos versiones de la página.
unidades:05_filtros:01_filtros [2014/08/05 16:37] admin [Referencias] |
unidades:05_filtros:01_filtros [2014/08/05 18:20] (actual) admin [5.1 Filtros] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== 5.1 Filtros ====== | ====== 5.1 Filtros ====== | ||
- | Los filtros permiten modificar como se muestran los datos. Ejemplos de ello es como se muestran las fechas, números, ordenar listas, etc. | + | Por ahora hemos visto varios artefactos en AngularJS: |
+ | * Directivas | ||
+ | * Controladores | ||
+ | * Servicios | ||
+ | |||
+ | 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: | Existen 2 tipos de filtros según a que tipo de datos se aplican: | ||
- | * [[unidades:05_filtros:02_escalares|Filtros para escalares]]: Se aplican a datos como números, fechas, texto, etc. | + | * [[unidades:05_filtros:02_escalares|Filtros para escalares]]: Se aplican a datos como números, fechas, texto, etc.Pero no a lista de datos |
* [[unidades:05_filtros:03_listas|Filtros para listas de datos]]: Se aplican a lista de datos como arrays | * [[unidades:05_filtros:03_listas|Filtros para listas de datos]]: Se aplican a lista de datos como arrays | ||
- | Los filtros se usan añadiendo al valor a mostrar el caracter de tubería ''|'' y luego el nombre del filtro y sus opciones. | + | 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 %%}}'' | ''%%{{valor | filtro:opciones %%}}'' | ||
Línea 16: | Línea 23: | ||
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. | 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 [[unidades:05_filtros:02_escalares#date]] para especificar el formato de la fecha a mostrar. | ||
===== Referencias ===== | ===== Referencias ===== | ||
* [[https://docs.angularjs.org/guide/filter|/ Developer Guide / Filters]] | * [[https://docs.angularjs.org/guide/filter|/ Developer Guide / Filters]] |