5.7 Ejemplo de filtro

Para acabar esta unidad vamos a crear un nuevo filtro llamado filteri18n cuyo funcionamiento es similar al del filtro filter pero de forma que permita filtrar independientemente de los acentos, diéresis, etc. Este nuevo filtro lo aplicaremos al ejemplo de seguros médicos.

Para crear el nuevo filtro filteri18n vamos a usar un truco que nos permitirá heredar del filtro filter original pero aumentando su funcionalidad. De esta forma nos ahorraremos mucho trabajo.

El truco consiste en que desde nuestro filtro filteri18n , en JavaScript, llamaremos al filtro filter original pero en dicha llamada le pasaremos siempre una función de comparación que no tenga en cuenta las diferencias de acentos, diéresis, etc.

Ya vimos en internacionalización una función de comparación para el filtro filter que permitía justamente hacer la búsqueda sin tener en cuenta los acentos, diéresis o circunflejos.

Aquí volvemos a poner el código de la función de comparación:

    /** 
     * Esta función cambia todas las vocales con acentos, diéresis y circunflejos
     * por la vocal sin ellos y también la transforma a mayúsculas.
     */
    function normalize(texto) {
      texto = texto.replace(/[áàäâ]/g, "a");
      texto = texto.replace(/[éèëê]/g, "e");
      texto = texto.replace(/[íìïî]/g, "i");
      texto = texto.replace(/[óòôö]/g, "o");
      texto = texto.replace(/[úùüü]/g, "u");
      texto = texto.toUpperCase();
      return texto;
    }

    /** Esta función se puede usar como comparator en el filter **/
    $scope.comparator = function(actual, expected) {
        if (normalize(actual).indexOf(normalize(expected))>=0) {
          return true;
        } else {
          return false;
        }
    };

Si hacemos nuestro filtro filteri18n para que simplemente llame a filter pero pasando nuestra nueva función de comparación ya lo tendremos casi todo hecho.

  var filterFn=$filter("filter");

  function filteri18n(array,expression) {
    return filterFn(array,expression,comparator)
  }

• Línea 1: A partir del servicio $filter obtenemos la función de JavaScript correspondiente al filtro filter.
• Línea 3: Ésta es nuestra función del filtro filteri18n que estamos creando.
• Línea 4: Lo único que hace nuestro filtro es llamar al filtro filter pero pasando como comparador nuestra función comparator.

Ahora vamos a poner todo el código junto:

app.filter("filteri18n",["$filter",function($filter) {
  var filterFn=$filter("filter");
  
  /** Transforma el texto quitando todos los acentos diéresis, etc. **/
  function normalize(texto) {
    texto = texto.replace(/[áàäâ]/g, "a");
    texto = texto.replace(/[éèëê]/g, "e");
    texto = texto.replace(/[íìïî]/g, "i");
    texto = texto.replace(/[óòôö]/g, "o");
    texto = texto.replace(/[úùüü]/g, "u");
    texto = texto.toUpperCase();
    return texto;
  }
   
  /** Esta función es el comparator en el filter **/
  function comparator(actual, expected) {
      if (normalize(actual).indexOf(normalize(expected))>=0) {
        return true;
      } else {
        return false;
      }
  }
  
  /** Este es realmente el filtro **/
  function filteri18n(array,expression) {
    //Lo único que hace es llamar al filter original pero pasado
    //la nueva función de comparator
    return filterFn(array,expression,comparator)
  }
  
  return filteri18n;
  
}]);

Ahora vamos a modificar la página listado.html para hacer uso de nuestro nuevo filtro filteri18n. Lo que queremos es poder filtrar las filas en función del apellido del asegurado.

Lo primero es añadir un nuevo campo <input> donde el usuario pueda escribir el nombre del apellido a buscar. Lo asociaremos al modelo filtro.ape1.

  Filtrar por apellido:<input ng-model="filtro.ape1" >

Y añadimos al $scope el modelo para filtrar:

$scope.filtro = {
  ape1: ""
}

Y por último hemos modificado la directiva ng-repeat para incluir el filtro filteri18n de forma que se filtre por el primer apellido:

<tr ng-repeat="seguro in seguros| filteri18n:{ape1:filtro.ape1}" ng-style="{color:($odd?'red':'green')}">

Ahora ve al listado de seguros médicos y escribe “lo” , sin acento, en la caja de texto .Verás que aparece únicamente el seguro de “Catalina López”. Si en vez de filteri18n usas filter no aparecerá ningún seguro.