Muestra las diferencias entre dos versiones de la página.
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]] | ||
+ | |||
+ |