5.6 Creando filtros

En este tema vamos a ver como crear filtros personalizados. Crear un nuevo filtro es casi tan sencillo como crear una función a la que le pasamos un valor y ésta retorna el nuevo valor con el filtro aplicado.

La forma de crear un filtro es llamando al método filter de un módulo. Este método acepta una función de factoría. Siendo la función de factoría la que retornará nuestra función de filtro.

Veamos un ejemplo muy simple. Vamos a volver a crear el filtro de pasar a mayúsculas.

Lo primero es crear la función que hace de filtro

function mayusculasFilter(valor) {
  if (typeof (valor)==="string") {
    return valor.toUpperCase();
  } else {
    return valor;
  }
}

• Línea 1: La función del filtro ¹⁾ se llama mayusculasFilter. Y como único parámetro acepta el valor que transformaremos en mayúsculas.
• Línea 2: Es importante comprobar que nos han pasado un String ya que se podría haber aplicado el filtro a cualquier cosa.
• Línea 3: Como es un String lo transformamos a mayúsculas y retornamos el nuevo valor.
• Línea 5: Si es valor no era un String retornamos lo mismo que nos pasaron ya que no tenemos nada que hacer con él.

Vemos como es muy sencilla la función , aunque lo único a recordar es que nos pueden pasar el filtro con cualquier valor , así que debemos comprobar el tipo de lo que nos han pasado.

Ahora toca definir la función de factoría que retorna la función del filtro.

function mayusculasFilterFactory() {
  return mayusculasFilter;
}

• Línea 2: Simplemente retornamos el nombre de nuestra función del filtro.

Al igual que con los servicio factory, es que sea una función de factoría nos permite inicializaciones complejas del filtro.

Por último nos queda definir el filtro en AngularJS

app.filter("mayusculas",mayusculasFilterFactory);

El código completo del filtro lo podemos ver ahora:

function mayusculasFilter(valor) {
  if (typeof (valor)==="string") {
    return valor.toUpperCase();
  } else {
    return valor;
  }
}


function mayusculasFilterFactory() {
  return mayusculasFilter;
}

app.filter("mayusculas",mayusculasFilterFactory);

Ya que la función de factoría es tan simple se podría poner como una función anónima al definir el filtro:

function mayusculasFilter(valor) {
  if (typeof (valor)==="string") {
    return valor.toUpperCase();
  } else {
    return valor;
  }
}

app.filter("mayusculas",function () {
  return mayusculasFilter;
});

• Línea 1: Se define la función del filtro
• Línea 9 y 10: Creamos el filtro en AngularJS y a la vez la función factoría.

Por último en muchos ejemplos de creación de filtros se hace todo con funciones anónimas:

app.filter("mayusculas",function () {
  return function (valor) {
    if (typeof (valor)==="string") {
      return valor.toUpperCase();
    } else {
      return valor;
    }
  };
});

Un motivo para tener una función factoría que retorna el propio filtro es que podemos inyectar servicio en la función de factoría.

Vamos a modificar el ejemplo para que se genere un log al crear el filtro usando el servicio de $log de AngularJS.

function mayusculasFilter(valor) {
  if (typeof (valor)==="string") {
    return valor.toUpperCase();
  } else {
    return valor;
  }
}

app.filter("mayusculas",['$log',function ($log) {
  $log.log("Creando el filtro");
  return mayusculasFilter;
}]);

• Línea 9: Inyectamos en la función de factoría el servicio de $log.
• Línea 10: Ahora usamos el servicio de $log dentro de la factoría.

Ahora vamos a hacer que a un array se transformen sus elementos a mayúsculas, siempre que el elemento sea un String.

Podríamos pensar que tenemos que hacer un nuevo filtro para soportar array pero nada impide que usemos el mismo filtro que antes para tratar también los Arrays. Lo que vamos a hacer es comprobar si el valor que nos pasan es un Array y en ese caso recorreremos cada elemento y si es un String lo transformaremos en mayúsculas.

El código del filtro queda ahora así:

function mayusculasFilter(valor,start) {
  
  if (typeof (valor)==="string") {
    return valor.toUpperCase();
  } else if (angular.isArray(valor)) {
    var newValue=[];
    
    for(var i=0;i<valor.length;i++) {
      if (typeof (valor[i])==="string") {
        newValue.push(valor[i].toUpperCase());
      } else {
        newValue.push(valor[i]);
      }
    }
    
    return newValue;
  } else {
    return valor;
  }
}

• Línea 5: Comprobamos si el valor es un array usando la función angular.isArray
• Línea 6: Creamos el nuevo array con los valores filtrado y que retornaremos en la línea 16
• Línea 8: Recorremos el array
• Línea 9: Comprobamos si el elemento iésimo del array es un String.
• Línea 10: Si es un String lo transformamos en mayúsculas y lo añadimos al nuevo array
• Línea 12: Si no era un String añadimos el elemento al nuevo array pero sin tocarlo.
• Línea 16: Finalmente retornamos el nuevo array que contiene los Strings en mayúsculas

Ahora veamos como incluir parámetros en nuestro filtro. Ya hemos visto el uso de parámetros en filtros como date o filter.

Incluir un parámetro en el filtro es tan sencillo como incluir dicho parámetro en nuestra función del filtro y hacer uso de él.

Vamos ahora a modificar el ejemplo añadiendo un parámetro de tipo numérico llamado length que indicará que solo queremos que los primeros length caracteres que transformen a mayúsculas.

function mayusculasFilter(valor,length) {
  
  if (typeof (valor)==="string") {
    
    if (angular.isNumber(length) && length>=0) {
      return valor.substr(0,length).toUpperCase()+valor.substr(length);
    } else {
      return valor.toUpperCase();
    }
    
    
  } else if (angular.isArray(valor)) {
    var newValue=[];
    
    for(var i=0;i<valor.length;i++) {
      if (typeof (valor[i])==="string") {
        if (angular.isNumber(length) && length>=0) {
          newValue.push(valor[i].substr(0,length).toUpperCase()+valor[i].substr(length));
        } else {
          newValue.push(valor[i].toUpperCase());
        }
      } else {
        newValue.push(valor[i]);
      }
    }
    
    return newValue;
  } else {
    return valor;
  }
}

• Línea 1: Se añade el parámetro a la función que corresponde al parámetro del filtro.
• Línea 5: Se comprueba si valor del parámetro es un número mediante angular.isNumber y además es mayor o igual a cero.
• Línea 6: En ese caso se aplica la función toUpperCase a los primeros length caracteres.
• Línea 8: Si el valor del parámetro no es adecuado se pasa a mayúsculas todo el String
• Líneas 17 a 21: Se hace el mismo proceso pero para los Strings de dentro del array

Ahora si aplicamos el filtro así:

<div>{{ "hola mundo" | mayusculas:3 }}</div>

Se generará lo siguiente:

<div>HOLa mundo</div>

Es el ejemplo hacemos uso del filtro mayusculas que hemos creado mediante el siguiente HTML

  {{ valorEscalar | mayusculas:3}}
  <br>
  <br>
  <div ng-repeat="valor in valorArray | mayusculas:3">
    {{valor}}
  </div>

Siendo el valor del $scope el siguiente:

$scope.valorEscalar="hola mundo";
$scope.valorArray=['lunes','martes',3.1416,'miercoles','jueves'];

Vemos como el tercer elemento del array es un número.En ese caso, tal y como lo hemos programado, se retorna el propio número.

• / Developer Guide / Filters / Creating custom filters