menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:05_filtros:03_listas [2014/08/07 11:15] admin [Búsqueda combinada] |
unidades:05_filtros:03_listas [2014/08/30 10:21] (actual) admin |
||
|---|---|---|---|
| Línea 6: | Línea 6: | ||
| * [[#filter]]: Filtra los datos del array. | * [[#filter]]: Filtra los datos del array. | ||
| - | Lo normal es usar estos filtros dentro de la directiva ''ng-repeat'' para modificar como se muestran los elementos de una tabla. | + | Lo normal es usar estos filtros dentro de la directiva ''ng-repeat'' para modificar la manera en que se muestran los elementos de una tabla. |
| ===== orderBy ===== | ===== orderBy ===== | ||
| Línea 15: | Línea 15: | ||
| ''%%{{array | orderBy:'propiedad' %%}}'' | ''%%{{array | orderBy:'propiedad' %%}}'' | ||
| - | Siendo ''propiedad'' el nombre de la propiedad del objeto de cada elemento del array por la que queremos ordenar. Si queremos ordenar por mas de una columna pondremos un array de Strings | + | Siendo ''propiedad'' el nombre de la propiedad del objeto de cada elemento del array por la que queremos ordenar. Si queremos ordenar por más de una columna pondremos un array de Strings |
| ''%%{{array | orderBy:['propiedad1','propiedad2',...,'propiedadn'] %%}}'' | ''%%{{array | orderBy:['propiedad1','propiedad2',...,'propiedadn'] %%}}'' | ||
| Línea 53: | Línea 53: | ||
| </sxh> | </sxh> | ||
| - | Si queremos ordenar en vez de forma ascendente de forma descendente no tenemos mas que incluir el signo "-" menos delante del nombre de la columna: | + | Si queremos ordenar en vez de forma ascendente de forma descendente no tenemos más que incluir el signo "-" menos delante del nombre de la columna: |
| <sxh html> | <sxh html> | ||
| Línea 63: | Línea 63: | ||
| <note tip> | <note tip> | ||
| - | AngularJS tambien permite crear tu propia función de ordenación pero no vamos ver nada sobre ella ya que la encuentro compleja de usar lo que la hace poco útil. | + | AngularJS tambien permite crear tu propia función de ordenación pero no vamos a ver nada sobre ella ya que la encuentro compleja de usar lo que la hace poco útil. |
| </note> | </note> | ||
| + | |||
| + | <note warning> | ||
| + | Un problema de este filtro es que al ordenar no tiene en cuenta los acentos o cosas similares, por lo que por ejemplo las letras con acentos irán después de todas las letras //normales//. | ||
| + | |||
| + | En el ejemplo que hay a continuación fíjate cómo la última provincia que se muestra es "Badajoz" y no aparece "Ávila" | ||
| + | </note> | ||
| ===== limitTo ===== | ===== limitTo ===== | ||
| Este filtro permite limitar el nº de elementos que se muestran del array. | Este filtro permite limitar el nº de elementos que se muestran del array. | ||
| Línea 91: | Línea 97: | ||
| </sxh> | </sxh> | ||
| - | podemos mostrar solo las 2 primeras provincias con: | + | podemos mostrar sólo las 2 primeras provincias con: |
| <sxh html> | <sxh html> | ||
| Línea 102: | Línea 108: | ||
| Si el valor es negativo lo que muestra es los 'n' últimos elementos del array en vez de los 'n' primeros. | Si el valor es negativo lo que muestra es los 'n' últimos elementos del array en vez de los 'n' primeros. | ||
| - | Podemos mostrar solo las últimas 2 provincias con: | + | Podemos mostrar sólo las 2 últimas provincias con: |
| <sxh html> | <sxh html> | ||
| <tr ng-repeat="provincia in provincias | limitTo:-2"> | <tr ng-repeat="provincia in provincias | limitTo:-2"> | ||
| Línea 119: | Línea 125: | ||
| </note> | </note> | ||
| ===== filter ===== | ===== filter ===== | ||
| - | El filtro ''filter'' , cuyo nombre es poco afortunado, filtra el array para que el array resultante solo tenga ciertos datos del array original | + | Ya que el filtro [[unidades:05_filtros:04_filter|filter]] dispone de tantas opciones, le hemos dedicado el [[unidades:05_filtros:04_filter|siguiente tema]] completo a él. |
| - | + | ||
| - | Este filtro soporta varios tipos de parámetros así que vamos a verlos uno por uno. | + | |
| - | + | ||
| - | En todos los ejemplos vamos a suponer los siguientes datos: | + | |
| - | <sxh js> | + | |
| - | $scope.valores = [{ | + | |
| - | idProvincia: 1, | + | |
| - | nombre: "Palencia", | + | |
| - | comunidadAutonoma:"Castilla-Leon", | + | |
| - | idiomasCooficiales:false | + | |
| - | }, { | + | |
| - | idProvincia: 2, | + | |
| - | nombre: "Castellón", | + | |
| - | comunidadAutonoma:"Valencia", | + | |
| - | idiomasCooficiales:true | + | |
| - | }, { | + | |
| - | idProvincia: 3, | + | |
| - | nombre: "Alicante", | + | |
| - | comunidadAutonoma:"Valencia", | + | |
| - | idiomasCooficiales:true | + | |
| - | }]; | + | |
| - | </sxh> | + | |
| - | ==== 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%' '' " | + | |
| - | + | ||
| - | **formato:** | + | |
| - | + | ||
| - | ''%%{{ valor | filter:texto %%}}'' | + | |
| - | + | ||
| - | Siendo ''texto'' una String con el texto a buscar en **cualquier** propiedad de los objetos de array. | + | |
| - | + | ||
| - | Si aplicamos el filtro de la siguiente forma: | + | |
| - | + | ||
| - | <sxh html> | + | |
| - | <tr ng-repeat="provincia in provincias | filter:'encia'"> | + | |
| - | <td>{{provincia.codProvincia}}</td> | + | |
| - | <td>{{provincia.nombre}}</td> | + | |
| - | </tr> | + | |
| - | </sxh> | + | |
| - | + | ||
| - | Mostrará las 3 provincias ya que el texto "encia" está en la propiedad nombre de "Palencia" y en la propiedad "comunidadAutonoma" de "Alicante" y "Castellón". | + | |
| - | + | ||
| - | ==== Búsqueda en una propiedad ==== | + | |
| - | + | ||
| - | Podemos restringir para que se busque en solo una propiedad de la siguiente forma: | + | |
| - | + | ||
| - | **formato:** | + | |
| - | + | ||
| - | ''%%{{ valor | filter:{ propiedad:texto } %%}}'' | + | |
| - | + | ||
| - | Siendo ''texto'' una String con el texto a buscar en la propiedad llamada ''propiedad'' | + | |
| - | + | ||
| - | <sxh html> | + | |
| - | <tr ng-repeat="provincia in provincias | filter:{ nombre:'encia'}'"> | + | |
| - | <td>{{provincia.codProvincia}}</td> | + | |
| - | <td>{{provincia.nombre}}</td> | + | |
| - | </tr> | + | |
| - | </sxh> | + | |
| - | + | ||
| - | Ahora solo busca el texto "encia" en la propiedad ''nombre''. | + | |
| - | + | ||
| - | ==== Búsqueda en varias propiedades ==== | + | |
| - | Si quremos buscar en mas de una propiedad y haciendo un **AND** entre ellas podemos usar: | + | |
| - | + | ||
| - | **formato:** | + | |
| - | + | ||
| - | ''%%{{ valor | filter:{ propiedad1:texto1, propiedad2:texto2 } %%}}'' | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | <sxh html> | + | |
| - | <tr ng-repeat="provincia in provincias | filter:{ nombre:'encia',comunidadAutonoma:'illa'}'"> | + | |
| - | <td>{{provincia.codProvincia}}</td> | + | |
| - | <td>{{provincia.nombre}}</td> | + | |
| - | </tr> | + | |
| - | </sxh> | + | |
| - | + | ||
| - | Ahora solo buscará aquellas provincias en cuyo nombre contenga el texto "encia" **y** en cuya comunidad autónoma contenga el texto "illa". | + | |
| - | + | ||
| - | ==== Búsqueda combinada ==== | + | |
| - | Se puede buscar un texto en todas las propiedades y además añadir otra condición con un **AND** usando el nombre de propiedad "$". Es decir que la propiedad "$" es como si fuera cualquier propiedad pero además junto con otras condiciones. | + | |
| - | + | ||
| - | Veamos un ejemplo: | + | |
| - | + | ||
| - | <sxh html> | + | |
| - | <tr ng-repeat="provincia in provincias | filter:{ $:'encia',idiomasCooficiales:true}'"> | + | |
| - | <td>{{provincia.codProvincia}}</td> | + | |
| - | <td>{{provincia.nombre}}</td> | + | |
| - | </tr> | + | |
| - | </sxh> | + | |
| - | + | ||
| - | Ahora buscará el texto "encia" en cualquier propiedad pero además la propiedad ''idiomasCooficiales'' deberá ser ''true''. | + | |
| - | Vemos que es una ventaja usar "''%%{{ array | filter:{$:texto} %%}}''" con respecto a simplemente usar "'''%%{{array | filter:texto%%}}''" ya que en el primer caso podemos añadir condiciones **AND** con el formato "''%%{{ array | filter:{$:texto,propiedad:valor} %%}}''" | ||
| ===== Ejemplo ===== | ===== Ejemplo ===== | ||
| Línea 220: | Línea 133: | ||
| ===== Referencias ===== | ===== Referencias ===== | ||
| * [[https://docs.angularjs.org/api/ng/filter/orderBy|/ API Reference / ng / filter / orderBy]] | * [[https://docs.angularjs.org/api/ng/filter/orderBy|/ API Reference / ng / filter / orderBy]] | ||
| - | * [[https://docs.angularjs.org/api/ng/filter/filter|/ API Reference / ng / filter / filter]] | + | * [[https://docs.angularjs.org/api/ng/filter/limiTo|/ API Reference / ng / filter / limiTo]] |
