Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:05_filtros:02_escalares [2014/08/06 13:07]
admin [number]
+++ unidades:05_filtros:02_escalares [2014/08/30 10:15] (actual)
admin
@@ Línea 9: / Línea 9: @@
   * [[#lowercase]]
   * [[#uppercase]]
-  * [[#json]]
@@ Línea 24: / Línea 23: @@
 </sxh>
-La variable ''importe'' solo se mostrará con 2 decimales.
+La variable ''importe'' sólo se mostrará con 2 decimales.
 <note tip>
-Si no se indica el número de decimales por defecto se muestran 3 decimales.
+Si no se indica el número de decimales, por defecto se muestran 3 decimales.
 </note>
 ===== date =====
@@ Línea 47: / Línea 46: @@
 Veamos ahora un ejemplo:
-<sxh js>
+<sxh html>
-{{miFecha | date:'yyyy/MM/dd'}}
+<div>{{miFecha | date:'yyyy/MM/dd'}}</div>
 </sxh>
 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 :
+AngularJS soporta que en vez de especificar directamente el formato de la fecha se usen los siguientes formatos predefinidos :
   * ''medium''
   * ''short''
@@ Línea 63: / Línea 62: @@
   * ''shortTime''
-El significado exacto de estos formatos depende del idioma que se haya elegido. Aunque se puede intuir por el nombre que tienen. Así que en la mayoría de las ocasiones se deberían de usar estos formatos predefinidos.
+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.
-<sxh js>
+<sxh html>
-{{miFecha | date:'shortDate'}}
+<div>{{miFecha | date:'shortDate'}}</div>
 </sxh>
 <note tip>
-Fijaté en que al poner opciones del filtro que sean un String hay que ponerlo entre comillas.
+Fíjate en que al poner opciones del filtro que sean un String hay que ponerlo entre comillas.
 </note>
 ===== currency =====
-Muestra un número con el símbolo de la moneda local y con el número de decimales correctos.
+Este filtro muestra un número con el símbolo de la moneda local y con el número de decimales correctos.
 **formato:**
@@ Línea 80: / Línea 79: @@
 Veamos ahora un ejemplo:
-<sxh js>
+<sxh html>
-{{ importe | currency }}
+<div>{{ importe | currency }}</div>
 </sxh>
-La variable ''importe'' se mostrará con el símbolo del $ y con 2 decimales.
+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.
+<note tip>
+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.
+<sxh html>
+<div>{{ 12.45 | currency:'EUR' }}</div>
+</sxh>
+Mostrará "12,45 EUR" en vez de "12,45 €".
+</note>
 ===== lowercase =====
+Este filtro transformará un String a minúsculas.
+**formato:**
+''%%{{ valor | lowercase  %%}}''
+Veamos ahora un ejemplo:
+<sxh html>
+<div>{{ nombre | lowercase }}</div>
+</sxh>
+La variable ''nombre'' se mostrará en minúsculas.
 ===== uppercase =====
+Este filtro transformará un String a mayúsculas.
-===== json =====
+**formato:**
+''%%{{ valor | uppercase  %%}}''
+Veamos ahora un ejemplo:
+<sxh html>
+<div>{{ nombre | uppercase }}</div>
+</sxh>
+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:
+<sxh html>
+<script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
+</sxh>
+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.
+<note tip>
+Recuerda cagar el Script con el idioma adecuado tras cargar AngularJS:
+<sxh html>
+<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>
+</sxh>
+</note>
+<note>
+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''.
+</note>
+===== 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.
+<sxh html;title:index.html>
+<!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>
+</sxh>
+<sxh js;title:script.js>
+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}}';
+}]);
+</sxh>
+{{url>http://embed.plnkr.co/uXmtY3}}
 ===== Referencias =====
-  * [[http://docs.angularjs.org/api/ng.filter:number|number]]
+  * [[https://docs.angularjs.org/api/ng/filter/number|/ API Reference / ng / filter / number]]
-  * [[http://docs.angularjs.org/api/ng.filter:date|date]]
+  * [[https://docs.angularjs.org/api/ng/filter/date|/ API Reference / ng / filter / date]]
-  * [[http://docs.angularjs.org/api/ng.filter:currency|currency]]
+  * [[https://docs.angularjs.org/api/ng/filter/currency|/ API Reference / ng / filter / currency]]
+  * [[https://docs.angularjs.org/api/ng/filter/lowercase|/ API Reference / ng / filter / lowercase]]
+  * [[https://docs.angularjs.org/api/ng/filter/uppercase|/ API Reference / ng / filter / uppercase]]
+  * [[https://docs.angularjs.org/guide/i18n|/ Developer Guide / i18n and l10n]]

unidades/05_filtros/02_escalares.1407323234.txt.gz · Última modificación: 2014/08/06 13:07 por admin

Ir hasta arriba