menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:05_filtros:03_listas [2014/08/07 08:51] admin [orderBy] |
unidades:05_filtros:03_listas [2014/08/30 10:21] (actual) admin |
||
|---|---|---|---|
| Línea 5: | Línea 5: | ||
| * [[#limitTo]]: Limita el número de elementos de un array | * [[#limitTo]]: Limita el número de elementos de un array | ||
| * [[#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 la manera en que se muestran los elementos de una tabla. | ||
| ===== orderBy ===== | ===== orderBy ===== | ||
| Línea 13: | 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 51: | 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 61: | Línea 63: | ||
| <note tip> | <note tip> | ||
| - | AngularJS tambien permite crear tu propia función de ordenación pero no vamos a mas sobre ella ya que la encuentro un poco compleja de usar. | + | 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> | ||
| - | ===== filter ===== | + | |
| - | Filtra el array para que el array resultante solo tenga ciertos datos del array original | + | |
| + | <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 ===== | ||
| + | Este filtro permite limitar el nº de elementos que se muestran del array. | ||
| **formato:** | **formato:** | ||
| - | ''%%{{unidades:%% valor | filter:expresion %%}}%%'' | + | ''%%{{array | limitTo:numero %%}}'' |
| - | Siendo ''expresion'' una expresión que filtrará los datos del array. | + | Siendo ''numero'' el nº de elementos que queremos mostrar del array. |
| Veamos ahora un ejemplo: | Veamos ahora un ejemplo: | ||
| Línea 76: | Línea 85: | ||
| Supongamos los siguientes datos | Supongamos los siguientes datos | ||
| <sxh js> | <sxh js> | ||
| - | $scope.valores = [{ | + | $scope.provincias = [{ |
| - | idProvincia: 1, | + | codProvincia: "02", |
| - | nombre: "Valencia" | + | nombre: "Albacete" |
| - | }, { | + | }, { |
| - | idProvincia: 2, | + | codProvincia: "03", |
| - | nombre: "Castellón" | + | nombre: "Alicante/Alacant" |
| - | }, { | + | }, { |
| - | idProvincia: 3, | + | codProvincia: "04", |
| - | nombre: "Alicante" | + | nombre: "Almería" |
| }]; | }]; | ||
| </sxh> | </sxh> | ||
| - | podemos mostrar solo aquellas provincias cuyo nombre contenga una "t" mediante la siguiente expresión: | + | podemos mostrar sólo las 2 primeras provincias con: |
| - | <sxh js> | + | <sxh html> |
| - | {{unidades: valores | filter:{ nombre:'t' } }} | + | <tr ng-repeat="provincia in provincias | limitTo:2"> |
| + | <td>{{provincia.codProvincia}}</td> | ||
| + | <td>{{provincia.nombre}}</td> | ||
| + | </tr> | ||
| </sxh> | </sxh> | ||
| + | |||
| + | Si el valor es negativo lo que muestra es los 'n' últimos elementos del array en vez de los 'n' primeros. | ||
| + | |||
| + | Podemos mostrar sólo las 2 últimas provincias con: | ||
| + | <sxh html> | ||
| + | <tr ng-repeat="provincia in provincias | limitTo:-2"> | ||
| + | <td>{{provincia.codProvincia}}</td> | ||
| + | <td>{{provincia.nombre}}</td> | ||
| + | </tr> | ||
| + | </sxh> | ||
| + | |||
| + | <note tip> | ||
| + | Recuerda que ''limitTo'' permite números negativos para indicar que se muestran los 'n' últimos elementos del array. | ||
| + | </note> | ||
| + | |||
| + | |||
| + | <note tip> | ||
| + | Aunque está en la documentación oficial de AngularJS, el filtro ''limitTo'' también se puede aplicar a Strings. En ese caso lo que hace es mostrar los "n" primeros/últimos caracteres del String. | ||
| + | </note> | ||
| + | ===== filter ===== | ||
| + | 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. | ||
| ===== Ejemplo ===== | ===== Ejemplo ===== | ||
| Línea 100: | 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]] |
