¡Esta es una revisión vieja del documento!
Estos filtros se aplican para modificar la forma en la que se muestran datos escalares 1).
Los distintos tipos de filtros para escalares que existen en AngularJS son:
Este filtro se aplica sobre números para limitar el nº de decimales que se muestran de dicho número. Aunque también cambia el separador de decimales al idioma que se esté usando actualmente.
formato:
{{valor | number:numdecimales }}
Veamos ahora un ejemplo:
<div>{{importe | number:2}}</div>
La variable importe
solo se mostrará con 2 decimales.
Este filtro se aplica sobre fechas para mostrar un formato concreto.
formato:
{{valor | date:'formato' }}
El formato de fecha acepta entre otros los siguientes campos:
yyyy
: El año con 4 dígitos. 2012, 1998MM
: El mes en formato numérico con dos dígitos. 01, 09, 12dd
: El día del mes con dos dígitos. 01, 21, 31HH
: La hora en 24 Horas con dos dígitos. 01, 09, 11, 23mm
: Los minutos con dos dígitos. 01, 09, 45, 59ss
: Los segundos con dos dígitos. 01, 09, 45, 59La referencia completa de los formatos de fecha la podemos encontrar en date
Veamos ahora un ejemplo:
<div>{{miFecha | date:'yyyy/MM/dd'}}</div>
Al mostrar la variable fecha
se verá primero el año, luego los meses y finalmente los días.
AngularJS soporta que en vez de especificar directamente el formato de la fecha usar los siguientes formatos predefinidos :
medium
short
fullDate
longDate
mediumDate
shortDate
mediumTime
shortTime
El significado exacto de estos formatos depende del idioma que se haya elegido, aunque se pueden intuir por el nombre que tienen. Así que en la mayoría de las ocasiones se deberían de usar estos formatos predefinidos.
<div>{{miFecha | date:'shortDate'}}</div>
Este filtro muestra un número con el símbolo de la moneda local y con el número de decimales correctos.
formato:
{{ valor | currency }}
Veamos ahora un ejemplo:
<div>{{ importe | currency }}</div>
La variable importe
por defecto se mostrará con el símbolo del $ y con 2 decimales pero si estamos en el idioma de “es-es” se mostraría con el símbolo del “€” y también 2 decimales.
Este filtro transformará un String a minúsculas.
formato:
{{ valor | lowercase }}
Veamos ahora un ejemplo:
<div>{{ nombre | lowercase }}</div>
La variable nombre
se mostrará en minúsculas
Este filtro transformará un String a mayúsculas.
formato:
{{ valor | uppercase }}
Veamos ahora un ejemplo:
<div>{{ nombre | uppercase }}</div>
La variable nombre
se mostrará en mayúsculas
En el siguiente ejemplo se aplican los distintos filtros , mostrando todas las variantes de formatos predefinidos de fecha .