Material‎ > ‎Software‎ > ‎Angular 1.x con ES6‎ > ‎

Filtros custom en AngularJS (ES6)

Ejemplo

Volviendo al ejemplo del conversor de medidas: si el usuario ingresa 10 millas y esto se transforma a 16.09344 kilómetros, nos gustaría que la aplicación mostrara en realidad la coma decimal que es nuestra configuración regional. Por otra parte también sería bueno que cuando el usuario ingrese valores que no se pueden transformar a número se muestre un mensaje de advertencia al usuario.

Entonces vamos a definir un filtro en un archivo aparte, como lo señalan las buenas prácticas:

/** Filter, muestra un número con coma decimal */
app.filter('numero', () => {
return (input) => {
if (input === null || isNaN(input)) {
return "Ingrese un número"
}
return input.toString().replace('.', ',')
}
})
filters.js

Definimos un filtro a partir de
  • el nombre con el que deben referenciarlo en el html , en este caso numero
  • y una función que recibe un input y hace la transformación correspondiente. En nuestro caso el resultado es un string.
En nuestro html vamos a aplicar el filtro sobre el valor que ingresará el usuario:
<p class="lead"
   data-ng-show="convertirForm.millas.$valid">{{conversorCtrl.kilometros | numero}}</p>
Aquí se ve que nuestro input es el valor de la propiedad millas del objeto conversor, y lo que se muestra en el div finalmente es el resultado de transformar esa propiedad según la función definida en el filtro numero.

De esta manera es muy fácil aplicar el filtro a cada uno de los números que se muestre en la aplicación, y definir en un solo lugar otras funcionalidades como
  • mostrar una cierta cantidad de decimales
  • trabajar con un rango de números mínimo o máximo
etc.

Links relacionados

Comments