Diferencias

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

--- unidades:05_filtros:07_ejemploseguro [2014/08/13 01:29]
admin
+++ unidades:05_filtros:07_ejemploseguro [2014/08/30 10:58] (actual)
admin
@@ Línea 1: / Línea 1: @@
 ====== 5.7 Ejemplo de filtro ======
-Para acabar esta unidad vamos a crear un nuevo filtro como [[http://www.cursoangularjs.es/doku.php?id=unidades:05_filtros:04_filter|filter]] pero el ejemplo de seguros para permitir filtrar independientemente de los acentos, diéresis, etc.
+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.
-Lo primero es crear el nuevo filtro, como ya comentamos es tan sencillo como incluir una función de [[unidades:05_filtros:04_filter&#internacionalizacion|comparación]] en [[unidades:05_filtros:04_filter|filter]] pero no queremos tener que acordarnos siempre de ponerlo así que vamos a crear un nuevo filtro llamado ''filteri18n''.
+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.
-Este filtro para tener la misma funcionalidad que ''filter'' pero sin tener que reprogramarla le vamos a inyectar el servicio de ''filter''. Es decir lo que vamos a simular es la herencia de filtros para aumentar su funcionalidad . Este truco nos podría servir para cualquier otro filtro que queramos crear.
+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:
-Veamos como queda el filtro:
 <sxh js>
 app.filter("filteri18n",["$filter",function($filter) {
@@ Línea 42: / Línea 89: @@
 }]);
 </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.1407886158.txt.gz · Última modificación: 2014/08/13 01:29 por admin

Ir hasta arriba