Filtros personalizados en AngularJS

En AngularJS, los filtros nos proporcionan una alternativa para formatear los datos usados por nuestra aplicación, o para desplegarlos a los usuarios. AngularJS provee un conjunto de filtros listos para usar, y de manera adicional, nosotros podemos escribir los nuestros. En este artículo haremos lo segundo.

Creación

Para crear un filtro, simplemente lo agregamos a nuestro módulo, lo nombramos y retornamos los datos enviados inicialmente.

Nota: Es una buena práctica crear un módulo para nuestros filtros distinto del módulo principal.

angular.module('myApp').filter('slug', function() {
    return function(input) {
        if (input) {
            return input;
        }
    };
});

Ok, nuestro filtro ya está recibiendo los datos, y retornándolos, pero no les está haciendo nada. Apliquémosles algo de procesamiento. Vamos a definir que nuestros filtro normalice los datos recibidos, forzándolos a minúscula y reemplazando los espacios por guiones bajos, para generar una URL por ejemplo.

angular.module('myApp').filter('slug', function() {
    return function(input) {
        if (input) {
            return input.toLowerCase().replace(/[^a-z_]/g, '_');
        }
    };
});

Utilización

Ahora que tenemos este sencillo filtro, usémoslo. Angular nos da la opción de llamar los filtros en nuestro HTML o JS. Vamos a revisar ambos casos.

Primero, HTML. Llamamos nuestro filtro dentro de una expresión usando el carácter “pipe” (“|”) dentro de una sintaxis {{}}. Esto nos permite enviar los datos a nuestra expresión como un argumento.

{{ 'Rob Stinogle' | slug }}

// Displays: rob_stinogle

Segundo, JavaScript. Podemos llamar nuestro filtro inyectando la dependencia $filter en nuestro controlador. Entonces tendremos acceso tanto a nuestros filtros como a los propios de Angular, incluyendo nuestro filtro personalizado “slug”. Podemos pasar tanto el nombre de nuestro filtro y los datos como argumentos.

angular.module('myApp').controller('myCtrl', function($scope, $filter) {
    var userName = 'Rob Stinogle';
    $scope.userSlug = $filter('slug')(userName);
    console.log($scope.userSlug);
}); 

// Displays: rob_stinogle

Eso es todo! Como es usual Angular hace las cosas increíblemente simples y organizadas.

Este artículo es original de Rob Stinogle y lo puedes encontrar en este enlace. Me di el trabajo de traducirlo al español porque lo encuentré conciso y suficientemente claro como para introducir el tema de los filtros en Angular.

Agregar un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *