Angular Logo

Creando filtros en AngularJS

Hola, los filtros son cosas bien útiles en el trabajo con AngularJS son tan útiles que el framework de por si nos provee una buena cantidad de los mismo para nuestro uso. Los filtros pueden ser usados tantos para darle un formato en particular a un texto como para el filtrado de una colección que estemos trabajando.

Este ejemplo muestra el uso del filtro currency en un texto

{{ 50 | currency}}

Con el uso de este filtro tendríamos un resultado de $50.00 que a simple vista es algo bien simple pero podríamos reutilizar en toda nuestra aplicación sea cual sea nuestra necesidad.

Para crear un filtro es necesario crear un module de angularjs, por lo que tenemos que tener algo como lo siguiente para cada uno de nuestros filtros:

var app = angular.module('app', []);

app.filter('nombreFiltro', [function(){
  return function(value){
    return value;
  }
}

Bueno para entender bien claro e aquí un ejemplo. Colocamos una cantidad de días y nos retorne la cantidad de meses en el mismo.

var app = angular.module('app', []);

app.filter('numeroDeMeses', [function(){
  return function(dias){
    return "Cantidad de meses " + Math.floor(value / 30);
  }
}

Como ya dije mas arriba este simple filtro simplemente me dice la cantidad de meses basados en el numero de días. Para poder usar dicho filtro lo utilizamos de esta manera.

Ejemplo Simple

<div ng-app='app'>
    {{ 30 | numeroDeMeses }}
    {{ 60 | numeroDeMeses }}
    {{ 45 | numeroDeMeses }}
</div>

Ahora bien este filtro redondea hacia abajo cada cantidad y digamos que en algunos casos vamos a querer eso y en otros no, pero queremos usar el mismo filtro, bueno los filtro también pueden recibir parámetros.

var app = angular.module('app', []);

app.filter('numeroDeMeses', [function(){
  return function(dias, redondearAbajo){
    if(redondearAbajo != undefined && redondearAbajo == true){
        return "Cantidad de meses " + Math.floor(value / 30);
    }
    
    return "Cantidad de meses " + (value / 30);
  }
}]);

Solo agregamos varias lineas de código y nuestro filtro esta listo para recibir parámetros, y el cual podemos usar dew esta manera:

<div ng-app='app'>
    {{ 30 | numeroDeMeses }}
    {{ 60 | numeroDeMeses:false }}
    {{ 45 | numeroDeMeses:true }}
</div>

En los casos donde no pasemos ningún parámetro lo estamos tratando como falso.

Los filtros también son muy usados a la hora de filtrar listas de elementos, en conjunto con la directiva ‘ng-repeat’.

<div>
    <ul>
        <li ng-repeat="item in list | filtro:parametroOpcional">{{item}}</li>
    </ul>
</div>

En este otro ejemplo crearemos una lista de numeros donde estaremos filtrando los numero mayores a un numero en particular.

var app = angular.module('app', []);

app.filter('mayorQue', [function(){
  return function(lista, numero){
    var resultado = [];

    resultado = lista.filter(function(item){
        return item > numero;
    });

    return resultado;
  }
}]);

Ahora para utilizar nuestro nuevo filtro es de la misma manera:

<div ng-app='app'>
    <p ng-repeat="i in [1,2,3,4,5,6,7,8] | mayorQue:4"> {{i}} </p>
</div>

Una vez probamos nuestro filtro este solo mostrara los numero que son mayores a 4.

Conclucion

Los filtros son muy util para formatear texto y/o filtrar lista, el uso de estos nos da una gran reutilizacion de código en nuestra aplicación y libera a los controllers o el back end de tener que hacer algún tipo de procesamiento.

Referencia

AngularJS Filtros

Encontré esta lista de filtros que puede ser util a mas de uno.