Muestra las diferencias entre dos versiones de la página.
unidades:05_filtros:07_ejemploseguro [2014/08/14 19:02] 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. | ||
- | 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 independientemente de los acentos, diéresis o circunflejos. | + | <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> | ||
- | Aqui volvemos a poner el código de la función de comparación: | + | 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];> | <sxh js;highlight: [5,16,17];> | ||
Línea 35: | Línea 39: | ||
</sxh> | </sxh> | ||
- | Si hacemos nuestro filtro ''filteri18n'' para 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. | + | 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]> | <sxh js;highlight: [1,3,4]> | ||
Línea 45: | Línea 49: | ||
</sxh> | </sxh> | ||
* Línea 1: A partir del servicio ''$filter'' obtenemos la función de JavaScript correspondiente al filtro ''filter''. | * Línea 1: A partir del servicio ''$filter'' obtenemos la función de JavaScript correspondiente al filtro ''filter''. | ||
- | * Línea 3: Esta es nuestra función del filtro ''filteri18n'' que estamos creando. | + | * 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''. | * Línea 4: Lo único que hace nuestro filtro es llamar al filtro ''filter'' pero pasando como comparador nuestra función ''comparator''. | ||
Línea 85: | 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}} |