Question

我正在使用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>

Answer 1

最近有同样的问题。 groupBy创建了一个对象，但orderBy需要一个数组，因此涉及到一点点的funkiness。我最终直接从他们的问题页面得到了答案，其中一位作者非常出色地解释了它，完整的代码示例基本上是我的复制/粘贴。

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

Answer 2

似乎正确的方法是使用| 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，因此我们可以将其删除！

Answer 3

我们可以通过在控制器和放大器中订购数据来实现这一点。将groupBy输出转换为Array。

在控制器中，在将记录发送到视图之前对其进行排序：

$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>

Answer 4

反转数组的更简单方法是使用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>

Answer 5

尝试使用 -

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

P.S-我到目前为止还没有使用过groupBy！但是这个减去的东西适用于orderBy属性！

Angularjs groupBy + orderBy

5 个答案: