Muestra las diferencias entre dos versiones de la página.
unidades:05_filtros:07_ejemploseguro [2014/08/14 19:31] admin [5.7 Ejemplo de filtro] |
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 7: | Línea 7: | ||
<note important> | <note important> | ||
- | Mas adelante en el curso veremos como 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. | + | 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> | </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 independientemente de los acentos, diéresis o circunflejos. | + | 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. |
- | Aqui volvemos a poner el código de la función de comparación: | + | 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 39: | 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 49: | 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 111: | Línea 111: | ||
</sxh> | </sxh> | ||
- | Ahora ves al listado de seguros médicos y escribe "lo" , sin acento, en la caja de texto , verás como aparece únicamente el seguro de "Catalina López". Si en vez de ''filteri18n'' usas ''filter'' no aparecerá ningún seguro. | + | 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}} | {{url>http://embed.plnkr.co/IKYXLx}} |