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 13:37]
admin [Comparador]
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'' ​busca 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 ​con acentos aunque no lo hayamos escrito?+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''​ o nada: Esta es la opción por defecto. Y como ya hemos dicho buscará que el texto que a buscar esté contenido en la propiedad. Es como en SQL ''​propiedad LIKE "​%textoBuscar%"''​.  +
-    * Deben coincidir incluso los acentos, diéresis, etc. +
-  * ''​true''​ : En este caso el texto a buscar debe ser igual al valor de la propiedad. ​ Es como en SQL ''​propiedad = textoBuscar''​ +
-  * //​función//​ : Es una función creada por nosotros a la que se le pasan 2 valores. El primer argumento es el valor de la propiedad y el segundo argumento el texto a buscar. Si la función retorna ''​true''​ es que son iguales y si retorna ''​false''​ es que son distintos. +
-    * Gracias a la función personalizamos como debe funcionar.+
  
-Veamos una tabla comparando las características de los 3 modos:+==== false ==== 
 +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 a buscar esté contenido en la propiedad. Es como en SQL ''​propiedad LIKE "​%textoBuscar%"''​. ​
  
-^  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.+<sxh html> 
 +<tr ng-repeat="​provincia in provincias | filter:{ nombre:'​encia'​}:​false">​ 
 +  <​td>​{{provincia.codProvincia}}</​td>​ 
 +  <​td>​{{provincia.nombre}}</​td>​ 
 +</​tr>​ 
 +</​sxh>​
  
-Pasemos ​ahora a ver unos ejemplos:+Busca en la propiedad "​nombre"​ si **contiene** la palabra "​encia"​. 
 + 
 + 
 +==== 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''​  
 + 
 +<sxh html> 
 +<tr ng-repeat="​provincia in provincias | filter:{ nombre:'​encia'​}:​true">​ 
 +  <​td>​{{provincia.codProvincia}}</​td>​ 
 +  <​td>​{{provincia.nombre}}</​td>​ 
 +</​tr>​ 
 +</​sxh>​ 
 + 
 +Busca en la propiedad "​nombre"​ si su valor es **exactamente** la palabra "​encia"​. 
 + 
 +==== funcion ==== 
 +En este caso no ponemos un valor booleano como ''​true''​ o ''​false''​ sino el nombre de una función creada por nosotros en el ''​$scope''​ y a la que se le pasarán 2 argumentos. El primer argumento es el valor de la propiedad y el segundo argumento es el texto a buscar. Si la función retorna ''​true''​ es que son iguales y si retorna ''​false''​ es que son distintos. 
 + 
 +En nuestro ejemplo vamos a suponer que tenemos la siguiente función en el ''​$scope''​ 
 +<sxh js> 
 +    $scope.comparator = function(actual,​ expected) { 
 +        if (actual.indexOf(expected)===0) { 
 +          return true; 
 +        } else { 
 +          return false; 
 +        } 
 +    };  
 +</​sxh>​ 
 +Esta función retorna ''​true''​ si el valor de ''​actual''​ comienza por el valor de ''​expected''​ 
 + 
 + 
 +<sxh html> 
 +<tr ng-repeat="​provincia in provincias | filter:{ nombre:'​encia'​}:​comparator">​ 
 +  <​td>​{{provincia.codProvincia}}</​td>​ 
 +  <​td>​{{provincia.nombre}}</​td>​ 
 +</​tr>​ 
 +</​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 sólo retorna ''​true''​ si el valor comienza por la palabra buscada. 
 + 
 +Veamos una tabla comparando más características de los 3 modos: 
 + 
 + 
 +^  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 | 
 + 
 +Como vemos el usar una función nos permite personalizar todo lo que queremos, como comparar los datos, aunque realmente no permite cambiar la consulta de búsqueda sino sólo la forma de comparar los 2 datos. 
 + 
 +=== 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 
 +     * 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>​ 
 +  * 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''​ en ''​filter''​ y encontraría cualquier palabra aunque escribamos mal los acentos, diéresis o circunflejos. 
 +===== Búsqueda personalizada ===== 
 +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: 
 + 
 +<sxh js> 
 +    $scope.consultaPersonalizada=function(value) { 
 +      if ((value.idiomasCooficiales===true) || (value.idProvincia>​2)) { 
 +        return true; 
 +      } else { 
 +        return false; 
 +      } 
 +    } 
 +</​sxh>​ 
 + 
 +Es una función ​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''​. 
 + 
 + 
 +<sxh html> 
 +<tr ng-repeat="​provincia in provincias | filter:consultaPersonalizada">​ 
 +  <​td>​{{provincia.codProvincia}}</​td>​ 
 +  <​td>​{{provincia.nombre}}</​td>​ 
 +</​tr>​ 
 +</​sxh>​ 
 + 
 +En ese caso sólo se mostrarán aquellas provincias que tengan un idioma cooficial y cuyo ''​idProvincia''​ sea mayor que 2 
 + 
 +<​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 pues la función personalizada de filtro se encarga de hacer todo el trabajo. 
 +</​note>​
  
 ===== Ejemplo ===== ===== Ejemplo =====
 +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''​
 +  * ''​true''​
 +  * 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:
 +  * ca
 +  * Ca
 +  * llón
 +  * llon
 +  * Castellón
 +  * castellon
 +
 +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.
  
 {{url>​http://​embed.plnkr.co/​N0cf8b}} {{url>​http://​embed.plnkr.co/​N0cf8b}}
 ===== Referencias ===== ===== Referencias =====
   * [[https://​docs.angularjs.org/​api/​ng/​filter/​filter|/​ API Reference / ng / filter / filter]]   * [[https://​docs.angularjs.org/​api/​ng/​filter/​filter|/​ API Reference / ng / filter / filter]]
unidades/05_filtros/04_filter.1407497820.txt.gz · Última modificación: 2014/08/08 13:37 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