2015-02-12 4 views
8

Sto usando groupBy da angular-filter al gruppo un array di oggetti da loro proprietà data.Angularjs groupBy + orderBy

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date')"> 
<h3>{{ day | date: mediumDate }}</h3> 
</div> 

che produce il seguente:

Feb 9, 2015 
Feb 10, 2015 
Feb 11, 2015 
Feb 12, 2015 

Come posso invertire l'ordine di partire dalla data più recente? Quando stampo alla console l'array viene stampato con l'ordine che voglio:

Object { 
    1423699200000: Array[1], 
    1423612800000: Array[7], 
    1423526400000: Array[11], 
    1423440000000: Array[1] 
} 

Ho anche scritto un filtro personalizzato per invertire l'ordine dopo il groupBy:

.filter("reverseOrder", function() { 
     function sortNumber(a,b) { 
      return parseInt(b) - parseInt(a); 
     } 
     return function(collection) { 
      var keys = Object.keys(collection).sort(sortNumber); 
      var reveredCollection= {}; 
      var length=collection.length; 
      angular.forEach(keys, function(key) { 
       reveredCollection[key] = collection[key]; 
      }); 
      return reveredCollection; 
     } 
    }) 

che ho applicato come questo:

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | reverseOrder)"> 
    <h3>{{ day | date: mediumDate }}</h3> 
</div> 

risposta

18

Recentemente ha avuto lo stesso problema. groupBy crea un oggetto, ma il orderBy ha bisogno di un array, quindi c'è un po 'di divertimento. Alla fine ho ottenuto la risposta direttamente dalla pagina dei problemi in cui uno degli autori ha fatto un ottimo lavoro nel spiegarlo completo di esempi di codice che erano fondamentalmente copia/incolla per me.

https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792

-1

un modo più semplice per invertire un array consiste nell'utilizzare il codice this answer

app.filter('reverseOrder', function() { 
    return function(items) { 
    return items.slice().reverse(); 
    }; 
}); 

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | reverseOrder)"> 
    <h3>{{ day | date: mediumDate }}</h3> 
</div> 
+0

Sempre lo stesso, sembra che il filtro di ritornare non ha alcun effetto sulla modalità di visualizzazione degli elementi .. – Shakur

-2

provare a utilizzare -

<div ng-repeat="(day, dayEvents) in events | groupBy: '-date' "> 

P.S- Non ho usato groupBy fino ad ora nessuna parte Ma questa cosa meno funziona bene con l'attributo orderBy!!

+0

groupBy e segno negativo non sono correlate. Non hanno alcuna relazione –

0

Possiamo ottenere questo ordinando i dati nel controllore & conversione uscita groupBy a matrice.

Nel controllore, ordinare i record prima di inviarlo alla vista:

$scope.events = $filter('orderBy')(events, '-date'); 

Ora il modello, riceve i dati in modo ordinato. Dopo il raggruppamento, abbiamo bisogno di trasformarlo in Array:

<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | toArray:true)"> 
    <h3>{{ day | dayEvents[0].date: mediumDate }}</h3> 
</div> 
2

sembra che il metodo di corretta è quello di utilizzare il | toArray: true | orderBy: customMappingFunction, tuttavia, ho trovato le prestazioni su questo per essere terribile. Mi si avvicinò con una soluzione che mantiene le prestazioni e produce il risultato corretto - (! Anche se sembra un po 'strano)

<div ng-repeat="(key, results) in allResults | groupBy: '-someKey')"> 
    <h3>{{ key | ltrim: '-' }}</h3> 
    <ul> 
     <li ng-repeat="result in results"> 
      {{ result }} 
     </li> 
    </ul> 
</div> 

Per qualsiasi motivo, aggiungendo il - non forzare il groupBy per ordinare in modo corretto, ma lo aggiunge anche allo key, quindi possiamo semplicemente rimuoverlo!