Cómo crear un filtro personalizado en AngularJS

AngularJS

Una vez que hemos visto cómo crear un módulo en Angular, es hora de crear un filtro personalizado. Los filtros nos permiten dar formato a los datos que mostremos por la vista de manera sencilla.

El filtro que vamos hacer quitará todos los espacios en blanco y lo mejor de todo es que se puede hacer en JavaScript. Por tanto, piensa cómo si tuvieras que resolverlo solamente con JavaScript.

Voy a mostrar la función en javaScript

JavaScript
1
2
3
4
5
6
7
<script>
function quitaEspacios(texto) {
   return texto.split(' ').join('');
};
 
console.log(quitaEspacios("Frase con espacios"));
</script>

Con el string que recojemos (texto) en la función, se emplea split() que divide la frase por los espacios que tiene devolviendo un array. Luego con join se juntan todos los elementos de este para devolver un string. Comprobamos que se muestra por consola correctamente.

Una vez que tenemos la función que necesitamos en JavaScript, toca pasarlo a un filtro de AngularJS. Para crear un filtro personalizado se emplea el método filter que acepta 2 argumentos, el nombre y una factory function. El nombre sera «quitaEspacios» y la factory function es la función que acabamos de crear. Vamos a partir del módulo que creamos en el post anterior.

JavaScript
1
2
3
4
5
miModuloVar.filter('quitaEspacios', function() {
    return function quitaEspacios(texto) {
       return texto.split(' ').join('');
    };
});

Curiosamente no devolvemos un resultado sino una función, por eso el 2º argumento del filtro se conoce como factory function. La finalidad es crear funciones y aunque parezca extraño, es parte de un patrón de diseño común, factory pattern o patrón de fabrica.

Según el punto de vista de Angular, no queremos usar una función aquí y ahora sino que devuelva una función que utilizar cuando se invoque el filtro asociado.

Poniendo todo junto

Para el ejemplo final, vamos a tener el siguiente código en un archivo llamado modulo.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var miModuloVar = angular.module('miModulo', []);
 
miModuloVar.filter('quitaEspacios', function() {
    return function quitaEspacios(texto) {
       return texto.split(' ').join('');
    };
});
 
miModuloVar.controller('miControlador', function ($scope) {
    var usuario = {
            nombre: 'Richard Hendricks',
            correo: 'ejemplo@guidacode.com',
            fechaAlta: new Date(2017, 07, 12),
            puntuacion: 8.659855,
            slugPerfil: 'ejemplo-usuario'
        };
        $scope.data = usuario;
   }
);

Contiene un módulo y dentro de este un filtro, el que acabamos de crear, y un controlador que contiene los datos de un usuario que se mostrarán en la vista mediante $scope.

Ahora en un nuevo html, llamamos tanto a este archivo como la biblioteca de angular. Además hay que tener en cuenta la directiva de ng-app y ng-controller estén rellenadas con el nombre del módulo y controlador respectivamente.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html >
<html ng-app="miModulo">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="modulo.js"></script>
</head>
 
<body ng-controller="miControlador">
<p>Frase con espacios</p>
<p>{{"Frase con espacios" | quitaEspacios}}</p>
<p>{{data.nombre}}</p>
<p>{{data.nombre | quitaEspacios}}</p>
</body>
</html>

Uso el filtro para un string y para un dato obtenido del controlador. Al final el filtro cumple con su cometido y elimina los espacios.

Y hasta aquí cómo crear un filtro personalizado, espero que os haya gustado. A seguir picando 🙂