Muestra las diferencias entre dos versiones de la página.
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}} |