Tabla de Contenidos
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 ''.
var app=angular.module("app",[]);
app.controller("PruebaController",['$scope','$filter',function($scope,$filter) {
var filtroCurrency=$filter("currency");
$scope.importeFormateado=filtroCurrency(2.5231);
}]);
- Línea 3: Inyectamos el servicio
$filter. - Línea 5: Le pedimos al servicio
$filterque nos de el filtro llamadocurrency. Ahora la variablefiltroCurrencycontiene 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.
var app=angular.module("app",[]);
app.controller("PruebaController",['$scope','$filter',function($scope,$filter) {
var filtroDate=$filter("date");
$scope.fechaFormateada=filtroDate(new Date(),"fullDate");
}]);
- Línea 5: Le pedimos al servicio
$filterque nos de el filtrodate. - Línea 7: Ahora usamos el filtro , pasando como primer argumento la fecha a formatear y como segundo argumento el formato de fecha.
$scope.fechaFormateada=$filter("date")(new Date(),"fullDate");
$scope.importeFormateado=$filter("currency")(2.5231);
Pero por motivos pedagógicos lo he explicado en los 2 pasos.
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.
