menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:05_filtros:06_creacion [2014/08/12 18:01] admin [5.6 Creando filtros] |
unidades:05_filtros:06_creacion [2014/08/30 10:53] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 5.6 Creando filtros ====== | ====== 5.6 Creando filtros ====== | ||
| - | En este tema vamos a ver como crear filtros personalizados. Crear un nuevo filtro es casi tan sencillo como crear una función a la que le pasamos un valor y ésta retorna el nuevo valor con el filtro aplicado. | + | En este tema vamos a ver cómo crear filtros personalizados. Crear un nuevo filtro es casi tan sencillo como crear una función a la que le pasamos un valor y ésta retorna el nuevo valor con el filtro aplicado. |
| - | La forma de crear un filtro es llamando al método ''filter'' de un módulo. Este método acepta una función de factoría. Siendo la función de factoría la que retornará nuestra función de filtro. | + | La forma de crear un filtro es llamando al método ''filter'' de un módulo. Este método acepta una función de factoría,siendo la función de factoría la que retornará nuestra función de filtro. |
| Veamos un ejemplo muy simple. Vamos a volver a crear el filtro de pasar a mayúsculas. | Veamos un ejemplo muy simple. Vamos a volver a crear el filtro de pasar a mayúsculas. | ||
| Línea 20: | Línea 20: | ||
| * Línea 2: Es importante comprobar que nos han pasado un String ya que se podría haber aplicado el filtro a cualquier cosa. | * Línea 2: Es importante comprobar que nos han pasado un String ya que se podría haber aplicado el filtro a cualquier cosa. | ||
| * Línea 3: Como es un String lo transformamos a mayúsculas y retornamos el nuevo valor. | * Línea 3: Como es un String lo transformamos a mayúsculas y retornamos el nuevo valor. | ||
| - | * Línea 5: Si es valor no era un String retornamos lo mismo que nos pasaron ya que no tenemos nada que hacer con él. | + | * Línea 5: Si el valor no era un String retornamos lo mismo que nos pasaron ya que no tenemos nada que hacer con él. |
| - | Vemos como es muy sencilla la función , aunque lo único a recordar es que nos pueden pasar el filtro con cualquier valor , así que debemos comprobar el tipo de lo que nos han pasado. | + | Vemos que es muy sencilla la función , aunque lo único que debemos recordar es que nos pueden pasar el filtro con cualquier valor , así que debemos comprobar el tipo de lo que nos han pasado. |
| Ahora toca definir la función de factoría que retorna la función del filtro. | Ahora toca definir la función de factoría que retorna la función del filtro. | ||
| Línea 34: | Línea 34: | ||
| * Línea 2: Simplemente retornamos el nombre de nuestra función del filtro. | * Línea 2: Simplemente retornamos el nombre de nuestra función del filtro. | ||
| - | Al igual que con los [[unidades:03_servicios:08_factory|servicio factory]], es que sea una función de factoría nos permite inicializaciones complejas del filtro. | + | Al igual que con los [[unidades:03_servicios:08_factory|servicio factory]], el que sea una función de factoría nos permite inicializaciones complejas del filtro. |
| Por último nos queda definir el filtro en AngularJS | Por último nos queda definir el filtro en AngularJS | ||
| Línea 41: | Línea 41: | ||
| app.filter("mayusculas",mayusculasFilterFactory); | app.filter("mayusculas",mayusculasFilterFactory); | ||
| </sxh> | </sxh> | ||
| - | Ahora simplemente le decimos a AngularJs el nombre real del filtro y el nombre de la función de factoría. Vemos que son 3 pasos y puede parece un poco largo, pero asi queda muy claro la función de cada uno. | + | Ahora simplemente le decimos a AngularJs el nombre real del filtro y el nombre de la función de factoría. Vemos que son 3 pasos y puede parece un poco largo, pero así queda muy clara la función de cada uno. |
| El código completo del filtro lo podemos ver ahora: | El código completo del filtro lo podemos ver ahora: | ||
| Línea 61: | Línea 61: | ||
| </sxh> | </sxh> | ||
| - | Ya que la función de factoría es tan simple se podría poner como una función anónima al definir el filtro: | + | Como la función de factoría es tan simple, se podría poner como una función anónima al definir el filtro: |
| <sxh js;highlight: [1,9,10];> | <sxh js;highlight: [1,9,10];> | ||
| function mayusculasFilter(valor) { | function mayusculasFilter(valor) { | ||
| Línea 76: | Línea 76: | ||
| </sxh> | </sxh> | ||
| - | * Línea 1: Se define la función del filtro | + | * Línea 1: Se define la función del filtro. |
| * Línea 9 y 10: Creamos el filtro en AngularJS y a la vez la función factoría. | * Línea 9 y 10: Creamos el filtro en AngularJS y a la vez la función factoría. | ||
| - | Por último en muchos ejemplos de creación de filtros se hace todo con funciones anónimas: | + | Por último, en muchos ejemplos de creación de filtros se hace todo con funciones anónimas: |
| <sxh js> | <sxh js> | ||
| app.filter("mayusculas",function () { | app.filter("mayusculas",function () { | ||
| Línea 93: | Línea 93: | ||
| <note tip> | <note tip> | ||
| - | Aunque queda mas compacto y durante mucho tiempo yo mismo lo he hecho así. Al final mi recomendación es crear la función de filtro por un lado y dejar la factoría como función anónima. | + | Aunque queda más compacto y durante mucho tiempo yo mismo lo he hecho así. Al final mi recomendación es crear la función de filtro por un lado y dejar la factoría como función anónima. |
| - | El motivo de esa es que con tanta función anónima al final te lías un poco: Así que donde está lo importante es la función del filtro por eso la hacemos de forma independiente. Y como la función de factoría es muy simple la ponemos como función anónima. | + | El motivo es que, con tanta función anónima al final te lías un poco. Así que, donde está lo importante es la función del filtro, por éso la hacemos de forma independiente. Y como la función de factoría es muy simple, la ponemos como función anónima. |
| </note> | </note> | ||
| <note warning> | <note warning> | ||
| - | La regla anterior tiene su excepción , si la función de filtro necesita de algún servicio inyectado necesitaremos definirla dentro de la función de factoría ya que necesitaríamos que se tuviera acceso al servicio y no lo podemos pasar como argumento ya que de esa forma romperíamos el contrato del filtro ya que no se le pueden pasar mas parámetros.Aunque como siempre en informática , con algún truco si que se podría dejar fuera la función. | + | La regla anterior tiene su excepción , si la función de filtro necesita de algún servicio inyectado necesitaremos definirla dentro de la función de factoría ya que necesitaremos tener acceso al servicio y no lo podemos pasar como argumento ya que de esa forma romperíamos el contrato del filtro porque no se le pueden pasar más parámetros.Aunque, como siempre en informática , con algún truco sí que se podría dejar fuera la función. |
| </note> | </note> | ||
| ===== Inyección de dependencias ===== | ===== Inyección de dependencias ===== | ||
| - | Un motivo para tener una función factoría que retorna el propio filtro es que podemos inyectar servicio en la función de factoría. | + | Un motivo para tener una función factoría que retorna el propio filtro es que podemos inyectar el servicio en la función de factoría. |
| Vamos a modificar el ejemplo para que se genere un log al crear el filtro usando el servicio de ''$log'' de AngularJS. | Vamos a modificar el ejemplo para que se genere un log al crear el filtro usando el servicio de ''$log'' de AngularJS. | ||
| Línea 125: | Línea 125: | ||
| ===== filtros para arrays ===== | ===== filtros para arrays ===== | ||
| - | Ahora vamos a hacer que a un array se transformen sus elementos a mayúsculas, siempre que el elemento sea un String. | + | Ahora vamos a hacer que a un array se le transformen sus elementos a mayúsculas, siempre que el elemento sea un String. |
| Podríamos pensar que tenemos que hacer un nuevo filtro para soportar array pero nada impide que usemos el mismo filtro que antes para tratar también los Arrays. Lo que vamos a hacer es comprobar si el valor que nos pasan es un Array y en ese caso recorreremos cada elemento y si es un String lo transformaremos en mayúsculas. | Podríamos pensar que tenemos que hacer un nuevo filtro para soportar array pero nada impide que usemos el mismo filtro que antes para tratar también los Arrays. Lo que vamos a hacer es comprobar si el valor que nos pasan es un Array y en ese caso recorreremos cada elemento y si es un String lo transformaremos en mayúsculas. | ||
| Línea 158: | Línea 158: | ||
| * Línea 9: Comprobamos si el elemento iésimo del array es un String. | * Línea 9: Comprobamos si el elemento iésimo del array es un String. | ||
| * Línea 10: Si es un String lo transformamos en mayúsculas y lo añadimos al nuevo array | * Línea 10: Si es un String lo transformamos en mayúsculas y lo añadimos al nuevo array | ||
| - | * Línea 12: Si no era un String añadimos el elemento al nuevo array pero sin tocarlo. | + | * Línea 12: Si no era un String añadimos el elemento al nuevo array pero sin tocarlo |
| * Línea 16: Finalmente retornamos el nuevo array que contiene los Strings en mayúsculas | * Línea 16: Finalmente retornamos el nuevo array que contiene los Strings en mayúsculas | ||
| Línea 164: | Línea 164: | ||
| Angular no distingue entre filtro de escalares y filtro para arrays. Es un problema de nuestro filtro el comprobar el tipo del valor a filtrar y actuar adecuadamente en cada caso. | Angular no distingue entre filtro de escalares y filtro para arrays. Es un problema de nuestro filtro el comprobar el tipo del valor a filtrar y actuar adecuadamente en cada caso. | ||
| - | Como hemos visto en nuestro ejemplo se usa el mismo filtro para un escalar como para un array. | + | Como hemos visto en nuestro ejemplo, se usa el mismo filtro tanto para un escalar como para un array. |
| </note> | </note> | ||
| ===== Parámetros ===== | ===== Parámetros ===== | ||
| - | Ahora veamos como incluir parámetros en nuestro filtro. Ya hemos visto el uso de parámetros en filtros como [[unidades:05_filtros:02_escalares#date|date]] o [[unidades:05_filtros:04_filter|filter]]. | + | Ahora veamos cómo incluir parámetros en nuestro filtro. Ya hemos visto el uso de parámetros en filtros como [[unidades:05_filtros:02_escalares#date|date]] o [[unidades:05_filtros:04_filter|filter]]. |
| Incluir un parámetro en el filtro es tan sencillo como incluir dicho parámetro en nuestra función del filtro y hacer uso de él. | Incluir un parámetro en el filtro es tan sencillo como incluir dicho parámetro en nuestra función del filtro y hacer uso de él. | ||
| - | Vamos ahora a modificar el ejemplo añadiendo un parámetro de tipo numérico llamado ''length'' que indicará que solo queremos que los primeros ''length'' caracteres que transformen a mayúsculas. | + | Vamos ahora a modificar el ejemplo añadiendo un parámetro de tipo numérico llamado ''length'' que indicará que sólo queremos que los primeros ''length'' caracteres se transformen a mayúsculas. |
| <sxh js; highlight: [1,5,6,8];> | <sxh js; highlight: [1,5,6,8];> | ||
| Línea 211: | Línea 211: | ||
| * Línea 5: Se comprueba si valor del parámetro es un número mediante [[https://docs.angularjs.org/api/ng/function/angular.isNumber|angular.isNumber]] y además es mayor o igual a cero. | * Línea 5: Se comprueba si valor del parámetro es un número mediante [[https://docs.angularjs.org/api/ng/function/angular.isNumber|angular.isNumber]] y además es mayor o igual a cero. | ||
| * Línea 6: En ese caso se aplica la función ''toUpperCase'' a los primeros ''length'' caracteres. | * Línea 6: En ese caso se aplica la función ''toUpperCase'' a los primeros ''length'' caracteres. | ||
| - | * Línea 8: Si el valor del parámetro no es adecuado se pasa a mayúsculas todo el String | + | * Línea 8: Si el valor del parámetro no es adecuado se pasa a mayúsculas todo el String. |
| - | * Líneas 17 a 21: Se hace el mismo proceso pero para los Strings de dentro del array | + | * Líneas 17 a 21: Se hace el mismo proceso pero para los Strings de dentro del array. |
| Ahora si aplicamos el filtro así: | Ahora si aplicamos el filtro así: | ||
| Línea 219: | Línea 219: | ||
| </sxh> | </sxh> | ||
| - | Se generará lo siguiente: | + | se generará lo siguiente: |
| <sxh html> | <sxh html> | ||
| <div>HOLa mundo</div> | <div>HOLa mundo</div> | ||
| Línea 229: | Línea 229: | ||
| </note> | </note> | ||
| ===== Ejemplo ===== | ===== Ejemplo ===== | ||
| - | Es el ejemplo hacemos uso del filtro ''mayusculas'' que hemos creado mediante el siguiente HTML | + | En el ejemplo hacemos uso del filtro ''mayusculas'' que hemos creado mediante el siguiente HTML |
| Línea 248: | Línea 248: | ||
| </sxh> | </sxh> | ||
| - | Vemos como el tercer elemento del array es un número.En ese caso, tal y como lo hemos programado, se retorna el propio número. | + | Vemos cómo el tercer elemento del array es un número.En ese caso, tal y como lo hemos programado, se retorna el propio número. |
| {{url>http://embed.plnkr.co/rbwJWzr5yySOzZVtSkUJ}} | {{url>http://embed.plnkr.co/rbwJWzr5yySOzZVtSkUJ}} | ||
