Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:05_filtros:07_ejemploseguro [2014/08/11 10:07]
admin creado
unidades:05_filtros:07_ejemploseguro [2014/08/30 10:58] (actual)
admin
Línea 1: Línea 1:
 ====== 5.7 Ejemplo de filtro ====== ====== 5.7 Ejemplo de filtro ======
 +Para acabar esta unidad vamos a crear un nuevo filtro llamado ''​filteri18n''​ cuyo funcionamiento es similar al del filtro ​ [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|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 [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|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 [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|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.
 +
 +<note important>​
 +Mas adelante en el curso veremos cómo modificar el propio funcionamiento de [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|filter]] para que no sea necesario crear una nueva directiva.
 +</​note>​
 +
 +Ya vimos en [[unidades:​05_filtros:​04_filter#​internacionalizacion|internacionalización]] una función de comparación para el filtro [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|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:​
 +
 +<sxh js;​highlight:​ [5,​16,​17];>​
 +    /** 
 +     * 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;
 +        }
 +    };
 +</​sxh>​
 +
 +Si hacemos nuestro filtro ''​filteri18n''​ para que simplemente llame a [[http://​www.cursoangularjs.es/​doku.php?​id=unidades:​05_filtros:​04_filter|filter]] pero pasando nuestra nueva función de comparación ya lo tendremos casi todo hecho.
 +
 +<sxh js;​highlight:​ [1,3,4]>
 +  var filterFn=$filter("​filter"​);​
 +
 +  function filteri18n(array,​expression) {
 +    return filterFn(array,​expression,​comparator)
 +  }
 +</​sxh>​
 +  * 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:
 +
 +<sxh js>
 +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;
 +  ​
 +}]);
 +</​sxh>​
 +===== Ejemplo =====
 +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''​.
 +
 +<sxh html>
 +  Filtrar por apellido:<​input ng-model="​filtro.ape1"​ >
 +</​sxh>​
 +
 +Y añadimos al ''​$scope''​ el modelo para filtrar:
 +<sxh js>
 +$scope.filtro = {
 +  ape1: ""​
 +}
 +</​sxh>​
 +
 +Y por último hemos  modificado la directiva ''​ng-repeat''​ para incluir el filtro ''​filteri18n''​ de forma que se filtre por el primer apellido:
 +
 +<sxh html>
 +<tr ng-repeat="​seguro in seguros| filteri18n:​{ape1:​filtro.ape1}"​ ng-style="​{color:​($odd?'​red':'​green'​)}">​
 +</​sxh>​
 +
 +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.
 +
 +{{url>​http://​embed.plnkr.co/​IKYXLx}}
unidades/05_filtros/07_ejemploseguro.1407744428.txt.gz · Última modificación: 2014/08/11 10:07 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0