5.2 Escalares

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:

number

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 sólo se mostrará con 2 decimales.

Si no se indica el número de decimales, por defecto se muestran 3 decimales.

date

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, 1998
  • MM: El mes en formato numérico con dos dígitos. 01, 09, 12
  • dd: El día del mes con dos dígitos. 01, 21, 31
  • HH: La hora en 24 Horas con dos dígitos. 01, 09, 11, 23
  • mm: Los minutos con dos dígitos. 01, 09, 45, 59
  • ss: Los segundos con dos dígitos. 01, 09, 45, 59

La 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 se usen 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 usar estos formatos predefinidos.

<div>{{miFecha | date:'shortDate'}}</div>

Fíjate en que al poner opciones del filtro que sean un String hay que ponerlo entre comillas.

currency

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 se mostrará por defecto con el símbolo del $ y con 2 decimales pero si estamos en el idioma de “es-es” se mostrará con el símbolo del “€” y también 2 decimales.

Este filtro también soporta pasarle directamente el símbolo de la moneda.Aunque el nº de decimales, separador, etc. seguirán siendo el del idioma definido.

<div>{{ 12.45 | currency:'EUR' }}</div>

Mostrará “12,45 EUR” en vez de “12,45 €”.

lowercase

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.

uppercase

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.

Internacionalización

Como hemos visto, los filtros number , date y currency varían su formato en función del idioma y país. ¿Cómo podemos indicar al AngularJS el idioma y el país que queremos usar? Simplemente debemos cargar el fichero JavaScript con el idioma y pais correspondiente.

Cuando nos descargamos AngularJS, en la carpeta i18n tenemos todos los ficheros para cada idioma/pais. Así si por ejemplo queremos usar el idioma español en España sólo hay que cargar el fichero:

i18n/angular-locale_es-es.js

Por lo tanto en una aplicación en España con el idioma español sólo hay que incluir la siguiente línea después de cargar AngularJS:

<script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>

Lo que no soporta (por ahora) AngularJS es más tipos de internacionalización como puedan ser los mensajes, sin embargo hay varios proyectos en github con filtros dedicados a ello.

Recuerda cagar el Script con el idioma adecuado tras cargar AngularJS:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>

No he visto cómo se puede cargar los ficheros de internacionalización de AngularJS desde el CDN de Google , es decir desde ajax.googleapis.com/ajax/libs/angularjs, así que los estoy cargando desde la página de descarga, es decir desde code.angularjs.org.

Ejemplo

En el siguiente ejemplo se aplican los distintos filtros , mostrando todas las variantes de formatos predefinidos de fecha . Para los ejemplos se ha usado el idioma español en España.

<!DOCTYPE html>
<html ng-app="app">
 
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
    <script src="script.js"></script>
  </head>
 
  <body ng-controller="PruebaController">
    
    <div>number:4 = {{ numeroDecimal | number:4 }}</div>
    <div>number = {{ numeroDecimal | number }}</div>
    
    <br>
    <br>
    
    <div>date:"yyyy/MM/dd" = {{ fecha | date:"yyyy/MM/dd" }}</div>
    <div>date:"medium" = {{ fecha | date:"medium" }}</div>
    <div>date:"short" = {{ fecha | date:"short" }}</div>
    <div>date:"fullDate" = {{ fecha | date:"fullDate" }}</div>
    <div>date:"longDate" = {{ fecha | date:"longDate" }}</div>
    <div>date:"mediumDate" = {{ fecha | date:"mediumDate" }}</div>
    <div>date:"shortDate" = {{ fecha | date:"shortDate" }}</div>
    <div>date:"mediumTime" = {{ fecha | date:"mediumTime" }}</div>
    <div>date:"shortTime" = {{ fecha | date:"shortTime" }}</div>
    <div>date = {{ fecha | date }}</div>
    
    <br>
    <br>
    
    <div>currency = {{ numeroDecimal | currency }}</div>
    
    <br>
    <br>
    
    <div>lowercase = {{ texto | lowercase }}</div>
    
    <br>
    <br>
    
    <div>uppercase = {{ texto | uppercase }}</div>


  </body>
 
</html>

var app=angular.module("app",[]);
  
app.controller("PruebaController",["$scope",function($scope) {

  $scope.fecha=new Date();
  $scope.numeroDecimal=321.98324;
  $scope.texto="Hola Mundo";
  $scope.objeto='{nombre:"Juan",apellido:"Perez",direccion: {calle:"Avenida Blasco Ibañez",numero:34}}';

}]);

Referencias

1) Números, fechas, textos, etc. pero no listas de datos
unidades/05_filtros/02_escalares.txt · Última modificación: 2014/08/30 10:15 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0