Diferencias

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

Enlace a la vista de comparación

unidades:05_filtros:04_filter [2014/08/08 18:03]
admin [Ejemplo]
unidades:05_filtros:04_filter [2014/09/11 14:20] (actual)
admin [funcion]
Línea 1: Línea 1:
-====== 5.4 filter ​====== +====== 5.4 Filter ​====== 
-El filtro ''​filter''​ , cuyo nombre es poco afortunado, filtra el array para que el array resultante ​solo tenga ciertos datos del array original+El filtro ''​filter''​ , cuyo nombre es poco afortunado, filtra el array para que el array resultante ​sólo tenga ciertos datos del array original
  
 Este filtro soporta varios tipos de parámetros así que vamos a verlos uno por uno. Este filtro soporta varios tipos de parámetros así que vamos a verlos uno por uno.
Línea 24: Línea 24:
 </​sxh>​ </​sxh>​
 ===== Búsqueda en todas las propiedades ===== ===== Búsqueda en todas las propiedades =====
-Vamos a ver como buscar un texto que esté en cualquiera de las propiedades de los objetos del array. Pero no hace falta que el texto y la propiedad coincidan exactamente sino solo una parte. Haciendo un símil con SQL es como si se hiciera un " ''​propiedad LIKE '​%texto%'​ ''​ " y usando todas las propiedades de cada objeto del array.+Vamos a ver cómo buscar un texto que esté en cualquiera de las propiedades de los objetos del array. Pero no hace falta que el texto y la propiedad coincidan exactamente sino sólo una parte. Haciendo un símil con SQL es como si se hiciera un " ''​propiedad LIKE '​%texto%'​ ''​ " y usando todas las propiedades de cada objeto del array.
  
 **formato:​** **formato:​**
Línea 30: Línea 30:
 ''​%%{{ valor | filter:​texto %%}}''​ ''​%%{{ valor | filter:​texto %%}}''​
  
-Siendo ''​texto'' ​una String con el texto a buscar en **cualquier** propiedad de los objetos de array. ​+Siendo ''​texto'' ​un String con el texto a buscar en **cualquier** propiedad de los objetos de array. ​
  
 Si aplicamos el filtro de la siguiente forma: Si aplicamos el filtro de la siguiente forma:
Línea 45: Línea 45:
 ===== Búsqueda en una propiedad ===== ===== Búsqueda en una propiedad =====
  
-Podemos restringir para que se busque en solo una propiedad de la siguiente forma:+Podemos restringir para que se busque en sólo una propiedad de la siguiente forma:
  
 **formato:​** **formato:​**
Línea 51: Línea 51:
 ''​%%{{ valor | filter:{ propiedad:​texto } %%}}''​ ''​%%{{ valor | filter:{ propiedad:​texto } %%}}''​
  
-Siendo ''​texto'' ​una String con el texto a buscar en la propiedad llamada ''​propiedad'' ​+Siendo ''​texto'' ​un String con el texto a buscar en la propiedad llamada ''​propiedad'' ​
  
 <sxh html> <sxh html>
Línea 60: Línea 60:
 </​sxh>​ </​sxh>​
  
-Ahora solo busca el texto "​encia"​ en la propiedad ''​nombre''​.+Ahora sólo busca el texto "​encia"​ en la propiedad ''​nombre''​.
  
 ===== Búsqueda en varias propiedades ===== ===== Búsqueda en varias propiedades =====
-Si quremos ​buscar en mas de una propiedad y haciendo un **AND** entre ellas podemos usar:+Si queremos ​buscar en más de una propiedad y haciendo un **AND** entre ellas podemos usar:
  
 **formato:​** **formato:​**
Línea 78: Línea 78:
 </​sxh>​ </​sxh>​
  
-Ahora solo buscará aquellas provincias ​en cuyo nombre contenga el texto "​encia"​ **y** en cuya comunidad autónoma contenga el texto "​illa"​.+Ahora sólo buscará aquellas provincias cuyo nombre contenga el texto "​encia"​ **y** cuya comunidad autónoma contenga el texto "​illa"​.
  
 ===== Búsqueda combinada ===== ===== Búsqueda combinada =====
Línea 105: Línea 105:
  
 ===== Comparador ===== ===== Comparador =====
-Hemos visto que el filtro ''​filter''​ comprueba que lo que buscamos ​ esté contenido dentro de la propiedad en la que buscamos, pero ¿Y si queremos que solo lo encuentre si es la palabra entera? ¿Y si queremos que encuentre una palabra ​solo si empieza por el texto por el que se filtra?, etc. , etc.+Hemos visto que el filtro ''​filter''​ comprueba que lo que buscamos ​ esté contenido dentro de la propiedad en la que buscamos, pero ¿y si queremos que solo lo encuentre si es la palabra entera? ¿Y si queremos que encuentre una palabra ​sólo si empieza por el texto por el que se filtra?, etc. , etc.
  
-Para ayudarnos en todo ésto, ​ el filtro ''​filter''​ dispone de un segundo parámetro que permite indicar ​como se hace la comparación entre los textos, veamos los 3 posibles valores.+Para ayudarnos en todo ésto, ​ el filtro ''​filter''​ dispone de un segundo parámetro que permite indicar ​cómo se hace la comparación entre los textos, veamos los 3 posibles valores.
  
 ==== false ==== ==== false ====
 Poner ''​false''​ es la funcionalidad por defecto, por lo tanto es lo mismo que no poner nada. Poner ''​false''​ es la funcionalidad por defecto, por lo tanto es lo mismo que no poner nada.
-Y como ya hemos dicho buscará que el texto que a buscar esté contenido en la propiedad. Es como en SQL ''​propiedad LIKE "​%textoBuscar%"''​. ​+Y como ya hemos dichobuscará que el texto a buscar esté contenido en la propiedad. Es como en SQL ''​propiedad LIKE "​%textoBuscar%"''​. ​
  
  
Línea 125: Línea 125:
  
 ==== true ==== ==== true ====
-Si se pone el valor ''​true''​ ,En este caso el texto a buscar debe ser igual al valor de la propiedad. ​ Es como en SQL ''​propiedad = textoBuscar'' ​+Si se pone el valor ''​true'', ​en este caso el texto a buscar debe ser igual al valor de la propiedad. ​ Es como en SQL ''​propiedad = textoBuscar'' ​
  
 <sxh html> <sxh html>
Línea 159: Línea 159:
 </​sxh>​ </​sxh>​
  
-Busca en la propiedad "​nombre"​ si su valor **comienza** con la palabra "​encia"​.Para hacerlo lo que hace es llamar a la función ''​comparator''​ que como ya hemos explicado ​solo retorna ''​true''​ si el valor comienza por la palabra buscada.+Busca en la propiedad "​nombre"​ si su valor **comienza** con la palabra "​encia"​.Para hacerlo lo que hace es llamar a la función ''​comparator''​ que como ya hemos explicado ​sólo retorna ''​true''​ si el valor comienza por la palabra buscada.
  
 Veamos una tabla comparando más características de los 3 modos: Veamos una tabla comparando más características de los 3 modos:
  
-^  Característica ​ ^  ''​false''​((Por defecto)) ​ ^  ''​true'' ​ ^  Función JavaScript ​ ^ 
-| El texto a buscar es ""​ | Se retornan todas las filas | No se retorna ninguna fila | Personalizado según lo que haga la función | 
-| Sensible a mayúsculas | Se encuentra independientemente de las mayúsculas / minúsculas | Deben coincidir las mayúsculas / minúsculas | Personalizado según lo que haga la función | 
-| Sensible a acentos, diéresis, etc. | Deben coincidir los acentos, diéresis, etc. | Deben coincidir los acentos, diéresis, etc. | Personalizado según lo que haga la función | 
  
-Como vemos el usar una función ​nos permite personalizar todo lo que queramos como comparar los datos, aunque realmente no permite cambiar ​la consulta de búsqueda sino solo la forma de comparar los 2 datos.+^  Valor parámetro ​ |  **El texto a buscar es ""​** ​ |  **Sensible a mayúsculas/​minusculas** ​ |  **Sensible a acentos, diéresis, etc.** ​ | 
 +^ ''​false''​((Por defecto)) ​  ​| ​ Se retornan todas las filas  |  NO ((Se encuentra independientemente de las mayúsculas / minúsculas)) ​ | Deben coincidir los acentos, diéresis, etc. | 
 +^ ''​true'' ​ |  No se retorna ninguna fila  |  SI ((Deben coincidir las mayúsculas / minúsculas)) ​ | Deben coincidir los acentos, diéresis, etc.  | 
 +^ Función JavaScript ​ | Personalizado según lo que haga la función ​| Personalizado según ​lo que haga la función | Personalizado según lo que haga la función |
  
-<note tip> +Como vemos el usar una función nos permite personalizar todo lo que queremoscomo comparar los datos, aunque realmente no permite cambiar la consulta ​de búsqueda sino sólo la forma de comparar ​los 2 datos.
-Aunque seguro ​que podrías hacerlo ​aquí pongo un ejemplo ​de función ​de comparación que es insensible a mayúsculas / minúsculas pero que también encuentra ​los elementos independientemente de los acentos, diéresis y circunflejos:​+
  
-<sxh js>+=== internacionalización === 
 +Aunque seguro que podrías hacerlo , aquí pongo un ejemplo de función de comparación para Strings que es insensible a mayúsculas / minúsculas pero que también encuentra los elementos independientemente de los acentos, diéresis y circunflejos:​ 
 + 
 +<sxh js;highlight: [5,16,17];>
     /**      /** 
      * Esta función cambia todas las vocales con acentos, diéresis y circunflejos      * 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.      * por la vocal sin ellos y también la transforma a mayúsculas.
-     * /+     */
     function normalize(texto) {     function normalize(texto) {
-      ​if (typeof texto === '​string'​) { +      texto = texto.replace(/​[áàäâ]/​g,​ "​a"​);​ 
-        ​texto = texto.replace(/​[áàäâ]/​g,​ "​a"​);​ +      texto = texto.replace(/​[éèëê]/​g,​ "​e"​);​ 
-        texto = texto.replace(/​[éèëê]/​g,​ "​e"​);​ +      texto = texto.replace(/​[íìïî]/​g,​ "​i"​);​ 
-        texto = texto.replace(/​[íìïî]/​g,​ "​i"​);​ +      texto = texto.replace(/​[óòôö]/​g,​ "​o"​);​ 
-        texto = texto.replace(/​[óòôö]/​g,​ "​o"​);​ +      texto = texto.replace(/​[úùüü]/​g,​ "​u"​);​ 
-        texto = texto.replace(/​[úùüü]/​g,​ "​u"​);​ +      texto = texto.toUpperCase();​ 
-        texto=texto.toUpperCase();​ +      return texto;
-        return texto; +
-      } else { +
-        return "";​ +
-      }+
     }     }
  
 +    /** Esta función se puede usar como comparator en el filter **/
     $scope.comparator = function(actual,​ expected) {     $scope.comparator = function(actual,​ expected) {
         if (normalize(actual).indexOf(normalize(expected))>​=0) {         if (normalize(actual).indexOf(normalize(expected))>​=0) {
Línea 199: Línea 197:
         }         }
     };     };
-    ​ 
- 
- 
 </​sxh>​ </​sxh>​
 +  * Línea 5: Esta función transforma cualquier texto quitando a cualquier vocal los acentos, diéresis y circunflejos.
 +  * Línea 16: Esta es la función de comparación que usaremos en ''​filter''​. Su entrada son los 2 textos a comparar.
 +  * Línea 17: Esta línea transforma los 2 textos usando la función ''​normalize''​ que quita los acentos, diéresis y circunflejos. Entonces al estar libre de ellos, simplemente los compara usando la función ''​indexOf''​.
  
-Ahora podríamos usar nuestra función ''​comparator''​ y encontraría cualquier palabra aunque escribamos mal los acentos. +Ahora podríamos usar nuestra función ''​comparator''​ en ''​filter''​ y encontraría cualquier palabra aunque escribamos mal los acentos, diéresis o circunflejos.
- +
-</​note>​+
 ===== Búsqueda personalizada ===== ===== Búsqueda personalizada =====
-Hasta ahora hemos visto como hacer filtros mirando en varias propiedades pero siempre era haciendo un **AND** entre ellas. AngularJS permite que le pasemos una función para que decidamos por nosotros mismos ​como filtrar los datos permitiendo hacer filtros todo lo complejo ​que queramos. En ese caso al filtro ''​filter'' ​solo se le pasa un único parámetro con el nombre de una función creada por nosotros en el ''​$scope''​ . Dicha función acepta un único parámetro con un elemento de array y deberemos retornar ''​true''​ en caso de que queramos que ese elemento se muestre y ''​false''​ si no queremos que se muestre. ​+Hasta ahora hemos visto cómo hacer filtros mirando en varias propiedades pero siempre era haciendo un **AND** entre ellas. AngularJS permite que le pasemos una función para que decidamos por nosotros mismos ​cómo filtrar los datos permitiendo hacer filtros todo lo complejos ​que queramos. En ese caso al filtro ''​filter''​ se le pasa un único parámetro con el nombre de una función creada por nosotros en el ''​$scope''​ . Dicha función acepta un único parámetro con un elemento de array y deberemos retornar ''​true''​ en caso de que queramos que ese elemento se muestre y ''​false''​ si no queremos que se muestre. ​
  
-Veamos un ejemplo, supongamos ​que en el ''​$scope''​ tenemos la siguiente función:+Veamos un ejemplo. Supongamos ​que en el ''​$scope''​ tenemos la siguiente función:
  
 <sxh js> <sxh js>
Línea 222: Línea 218:
 </​sxh>​ </​sxh>​
  
-Es una función a la que le pasaremos un valor del array y nos retorna ''​true''​ si ''​value.idiomasCooficiales===true''​ **OR** ''​value.idProvincia>​2''​. Observa ​como hemos usado el operador ''​OR''​ que hasta ahora no habíamos podido ​usarlo.+Es una función a la que le pasaremos un valor del array y nos retorna ''​true''​ si ''​value.idiomasCooficiales===true''​ **OR** ''​value.idProvincia>​2''​. Observa ​cómo hemos usado el operador ''​OR''​ que hasta ahora no habíamos podido ​usar.
  
 Ahora podemos simplemente usar esa función en el filtro ''​filter''​. Ahora podemos simplemente usar esa función en el filtro ''​filter''​.
Línea 234: Línea 230:
 </​sxh>​ </​sxh>​
  
-En ese caso solo se mostrarán aquellas provincias que tengan un idioma cooficial y cuyo ''​idProvincia''​ sea mayor que 2+En ese caso sólo se mostrarán aquellas provincias que tengan un idioma cooficial y cuyo ''​idProvincia''​ sea mayor que 2
  
 <​note>​ <​note>​
-En caso de usar la función personalizada de filtro ya no se puede pasar un segundo argumento con la función de ''​comparator''​ ya que no tiene sentido ​ya que la función personalizada de filtro se encarga de hacer todo el trabajo.+En caso de usar la función personalizada de filtro ya no se puede pasar un segundo argumento con la función de ''​comparator''​ ya que no tiene sentido ​pues la función personalizada de filtro se encarga de hacer todo el trabajo.
 </​note>​ </​note>​
  
 ===== Ejemplo ===== ===== Ejemplo =====
-En ese ejemplo podemos escribir en la caja de texto y podremos ver 3 ejemplos de como se comparan los datos en el filtro con:+En ese ejemplo podemos escribir en la caja de texto y podremos ver 3 ejemplos de cómo se comparan los datos en el filtro con:
   * ''​false''​   * ''​false''​
   * ''​true''​   * ''​true''​
-  * función personalizada de comparación.+  * función personalizada de comparación ​que sólo retorna ''​true''​ si el texto a buscar está al principio del valor de la propiedad pero que es sensible a mayúsculas / minúsculas.
  
 Prueba a escribir: Prueba a escribir:
-  * cas +  * ca 
-  * Cas+  * Ca
   * llón   * llón
   * llon   * llon
Línea 254: Línea 250:
   * castellon   * castellon
  
-Y observa ​como funciona cada una de las 3 formas.+Y observa ​cómo funciona cada una de las 3 formas.
  
 Por último hay una última tabla en la que se ve la función personalizada. Por último hay una última tabla en la que se ve la función personalizada.
unidades/05_filtros/04_filter.1407513811.txt.gz · Última modificación: 2014/08/08 18:03 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0