AngularJS – Agrupar y ordenar una lista

diciembre 1, 2014

Dada una lista de expedientes tenía que agrupar por el número de expediente -derivado de 2 atributos- y ordenar los registros, primero por añode forma descendiente y luego por número de expediente de forma ascendente.
Para realizar esta tarea utilicé la librería angular-filter

Un expediente

{
id: 1234233
numero: 1234,
anyo: 2014,
expediente: '1234/2014', //derivado
descripcion: 'La descripción del expediente'
}

para desplegar un listado de expedientes

<ion-item>
                <div
                        ng-repeat="group in expedientes | groupBy: 'expediente' | toArray:true | orderBy: sortByExpedienteAnyo "
                        class="list card">

                    <div class="item item-divider">
                        <h2>{{ group.$key }}</h2>
                    </div>
                    <div class="item item-body" ng-repeat="expediente in group">
                        <p>
                            {{ expediente.descripcion }}
                        </p>
                    </div>
                </div>
            </ion-item>

y en el controlador

$scope.sortByExpedienteAnyo = function (arr) {
            /*
             Este método es llamado para cada grupo generado. Dado que agrupamos por expediente, el número y el año es el
             mismo para cada elemento del array, Por ello, regresamos una cadena que será utilizada para ordenar los grupos
             por año de forma descendente y por número de forma ascendente
             https://github.com/a8m/angular-filter/wiki/Common-Questions#order-groupby-result
             */
            var item = arr[0]
            return '' + 1 / item.expedienteAnyo + ('000' + item.expedienteNumero).slice(-4)
        }

Fuentes:
https://github.com/a8m/angular-filter/wiki/Common-Questions#order-groupby-result
http://stackoverflow.com/questions/17037524/orderby-multiple-fields-in-angular
http://stackoverflow.com/questions/14935996/how-to-use-a-filter-in-javascript-insted-of-the-html
http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter
http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: