Herramientas de usuario

Herramientas del sitio


unidades:05_filtros:05_javascript

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión
Revisión previa
unidades:05_filtros:05_javascript [2014/08/08 18:44] – adminunidades: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 23: Línea 23:
  
 Al ejecutar el ejemplo la propiedad ''importeFormateado'' tendrá el valor "2,52 €" como un String. 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.1407516255.txt.gz · Última modificación: por admin