Introducción a los filtros de AngularJS

Cuando se trabajan con datos que se obtienen de la base de datos, es posible que tengan que tener un formato. Es muy común tener que cambiar el formato de una fecha, de inglés a español, o eliminar el exceso de ceros de un número. Por esa clase de cosas, AngularJS ofrece filtros que permiten solucionar el problema con el formato de los datos.

Los filtros de AngularJS dan formato a los valores de las expresiones que se muestran al usuario. Supongamos que tenemos un objeto JSON con los datos de un usuario.

Vamos a crear un modulo llamado filtros y en el estará el controlador ejemploFiltro que tendrá el objeto JSON (modelo) con todos los datos.

  <script>

	 angular.module("filtros", []).controller("ejemploFiltro", function($scope) {
         var usuario = {
            nombre: 'EJEMPLO',
            correo: 'ejemplo@guidacode.com',
            fechaAlta: new Date(2017, 07, 12),
            puntuacion: 8.659855,
            slugPerfil: 'ejemplo-usuario'
        };
 
        $scope.data = usuario;
		
	});
  </script>

angular.module("filtros", []).controller("ejemploFiltro", function($scope) {

var usuario = {

nombre: 'EJEMPLO',

correo: 'ejemplo@guidacode.com',

fechaAlta: new Date(2017, 07, 12),

puntuacion: 8.659855,

slugPerfil: 'ejemplo-usuario'

};

$scope.data = usuario;

});

</script>

Los datos se almacenan en el objeto $scope.data que se podrá acceder desde la vista.

Cómo usar un filtro

Para poder usar un filtro hay que emplear el carácter » | » junto con el dato que queremos filtrar e indicando el nombre del filtro que vamos a usar.

En este caso como el nombre está en mayúsculas, queremos pasarlo a minúsculas y usaremos el filtro lowercase que viene por defecto con AngularJS.

<body ng-app="filtros" ng-controller="ejemploFiltro">
 
<h3>Sin filtro</h3>
<strong>First Name</strong>: {{data.nombre}}<br/>

 
<h3>Con filtro</h3>
<strong>First Name</strong>: {{data.nombre | lowercase}}<br/>
 
</body>

<h3>Sin filtro</h3>

<strong>First Name</strong>: {{data.nombre}}<br/>

<h3>Con filtro</h3>

<strong>First Name</strong>: {{data.nombre | lowercase}}<br/>

</body>

AngularJS proporciona otros filtros para fechas y números además de las cadenas de texto. En el siguiente post, hablaré de los filtros básicos más usados y en otra ocasión como crear nuestro filtro propio.

Los filtros permiten ahorrar mucho código. En este caso podríamos haber resuelto el problema con javaScript pero hubiese sido menos eficiente. De hecho, con AngularJS se persigue un código mucho más organizado.

        usuario.nombre = usuario.nombre.toLowerCase();
        $scope.data = usuario;
   });
</script>

usuario.nombre = usuario.nombre.toLowerCase();

$scope.data = usuario;

});

</script>

Aunque no es obligatorio usar los filtros, son una opción a tener en cuenta para tener un código modular y limpio sobretodo si sueles reciclar código.

Espero que esta introducción a los filtros de AngularJS os haya sido de ayuda.A seguir picando 🙂