web-dev-qa-db-ja.com

Angularjs groupBy + orderBy

angular-filter のgroupByを使用して、オブジェクトの配列を日付プロパティでグループ化しています。

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

これは以下を生成します：

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

順序を逆にして最新の日付から開始するにはどうすればよいですか？コンソールに出力すると、配列は希望する順序で出力されます。

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

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;
        }
    })

私はこのように適用しました：

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

最近同じ問題がありました。 groupByはオブジェクトを作成しますが、orderByは配列を必要とするため、ファンキーさが少し含まれています。私は結局、問題のページから直接回答を得ました。著者の1人が、基本的に私にコピー/貼り付けされたコードサンプルでそれを説明する優れた仕事をしました。

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

19
aron.duby

properメソッドは| toArray: true | orderBy: customMappingFunction、しかし、私はこれのパフォーマンスがひどいことに気づきました。私はパフォーマンスを維持し、正しい結果を生成するソリューションを思いつきました-（少し奇妙に見えますが！）

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

何らかの理由で、-はgroupByを強制的に正しくソートしますが、それをkeyにも追加するので、削除するだけです！

3
Roi

これを実現するには、コントローラーでデータを並べ替え、groupBy出力を配列に変換します。

コントローラで、ビューに送信する前にレコードを注文します。

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

テンプレートがソートされた順序でデータを受け取ります。グループ化した後、それをArrayに変換する必要があります：

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