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/14 16:52]
admin
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 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 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. 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.
Línea 6: Línea 6:
 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. 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.
  
-Veamos ​como queda el filtro:+<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> <sxh js>
 app.filter("​filteri18n",​["​$filter",​function($filter) { app.filter("​filteri18n",​["​$filter",​function($filter) {
Línea 42: Línea 89:
 }]); }]);
 </​sxh>​ </​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.1408027965.txt.gz · Última modificación: 2014/08/14 16:52 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