Diferencias

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

Enlace a la vista de comparación

unidades:05_filtros:05_javascript [2014/08/08 18:38]
admin creado
unidades:05_filtros:05_javascript [2014/08/30 10:39] (actual)
admin
Línea 1: Línea 1:
 ====== 5.5 Filtros desde JavaScript ====== ====== 5.5 Filtros desde JavaScript ======
-Hemos visto hasta ahora como usar los filtros desde la página HTML pero también se puede usar un filtro directamente desde JavaScript y de esa forma obtener el valor formateado en una variable de JavaScript.+Hemos visto hasta ahora cómo usar los filtros desde la página HTML pero también se puede usar un filtro directamente desde JavaScript y de esa forma obtener el valor formateado en una variable de JavaScript.
  
-Su uso es muy sencillo ya que es realmente un servicio de AngularJS llamado ''​$filter''​. Este servicio es una función a la que le pasamos el nombre del filtro y nos retorna la función real de nuestro filtro. Aunque parece un poco trabalenguas ahora con un ejemplo se entenderá perfectamente.+Su uso es muy sencillo ya que realmente ​es un servicio de AngularJS llamado ''​$filter''​. Este servicio es una función a la que le pasamos el nombre del filtro y nos retorna la función real de nuestro filtro. Aunque parece un poco trabalenguas ahora con un ejemplo se entenderá perfectamente.
  
 Veamos un ejemplo del filtro ''​currency ''​. Veamos un ejemplo del filtro ''​currency ''​.
Línea 21: Línea 21:
   * Línea 5: Le pedimos al servicio ''​$filter''​ que nos de el filtro llamado ''​currency''​. Ahora la variable ''​filtroCurrency''​ contiene la verdadera función que hace de filtro y que podemos usar donde queramos.   * Línea 5: Le pedimos al servicio ''​$filter''​ que nos de el filtro llamado ''​currency''​. Ahora la variable ''​filtroCurrency''​ contiene la verdadera función que hace de filtro y que podemos usar donde queramos.
   * Línea 7: Ahora es cuando usamos el filtro , y le pasamos como primer parámetro el valor a filtrar.   * Línea 7: Ahora es cuando usamos el filtro , y le pasamos como primer parámetro el valor a filtrar.
 +
 +Al ejecutar el ejemplo la propiedad ''​importeFormateado''​ tendrá el valor "2,52 €" como un String.
 +
 +Si queremos usar un filtro que tenga argumentos ,como por ejemplo el filtro ''​date''​ , simplemente se pasarán como segundo argumento.
 +
 +<sxh js;​title:​index.html;​ highlight: [5,7];>
 +var app=angular.module("​app",​[]);​
 +  ​
 +app.controller("​PruebaController",​['​$scope','​$filter',​function($scope,​$filter) {
 +
 +  var filtroDate=$filter("​date"​);​
 +  ​
 +  $scope.fechaFormateada=filtroDate(new Date(),"​fullDate"​);​
 +
 +
 +}]);
 +</​sxh>​
 +
 +  * Línea 5: Le pedimos al servicio ''​$filter''​ que nos de el filtro ''​date''​.
 +  * Línea 7: Ahora usamos el filtro , pasando como primer argumento la fecha a formatear y como segundo argumento el formato de fecha.
 +
 +<note tip>
 +Normalmente en los ejemplo que se suele ver de AngularJS se hace todo en una única línea ya que queda más compacto.
 +
 +<sxh js>
 +  $scope.fechaFormateada=$filter("​date"​)(new Date(),"​fullDate"​);​
 +  $scope.importeFormateado=$filter("​currency"​)(2.5231);​
 +</​sxh>​
 +
 +Pero por motivos pedagógicos lo he explicado en los 2 pasos.
 +</​note>​
 +
 +===== Ejemplo =====
 +En este ejemplo mostramos en pantalla los datos que hemos formateado. Entonces, ¿cuál ha sido la ventaja de usar el servicio ''​$filter''?​ Que podríamos haber mostrado los datos en un ''​alert''​ ,cosa que antes no se podía hacer antes, o como es obvio, usarlo desde JavaScript como queramos.
 +
 +{{url>​http://​embed.plnkr.co/​flzxp0z6jrhLps2uEvm1}}
 +
 +===== Referencias =====
 +  * [[https://​docs.angularjs.org/​api/​ng/​service/​$filter|/​ API Reference / ng / service / $filter]]
 +
 +
unidades/05_filtros/05_javascript.1407515893.txt.gz · Última modificación: 2014/08/08 18:38 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