menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:05_filtros:01_filtros [2014/08/05 16:36] admin |
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 ===== | ||
| - | * [[http://docs.angularjs.org/guide/dev_guide.templates.filters.using_filters|Using Angular Filters]] | + | * [[https://docs.angularjs.org/guide/filter|/ Developer Guide / Filters]] |
