Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 5.5 Filtros desde 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 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 ''.

<sxh js;title:index.html; highlight: [3,5,7];>
var app=angular.module("app",[]);
  
app.controller("PruebaController",['$scope','$filter',function($scope,$filter) {

  var filtroCurrency=$filter("currency");

  $scope.importeFormateado=filtroCurrency(2.5231);

}]);
</sxh>

  * Línea 3: Inyectamos el servicio ''$filter''.
  * 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.

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]]