Javascript Angularjs groupBy + orderBy
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28473736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs groupBy + orderBy
提问by Shakur
I am using groupBy from angular-filterto group an array of objects by their date property.
我正在使用angular-filter 中的groupBy 来按对象的日期属性对对象数组进行分组。
<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' )">
<h3>{{ day | date: mediumDate }}</h3>
</div>
Which produces the following:
产生以下结果：
Feb 9, 2015
Feb 10, 2015
Feb 11, 2015
Feb 12, 2015
How can I reverse the order to start from the most recent date? When I print to the console the array is printed with the order I want:
如何从最近的日期开始颠倒顺序？当我打印到控制台时，数组以我想要的顺序打印：
Object {
1423699200000: Array[1],
1423612800000: Array[7],
1423526400000: Array[11],
1423440000000: Array[1]
}
I also wrote a custom filter to reverse the order after the groupBy:
我还写了一个自定义过滤器来反转 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;
}
})
Which I have applied like this:
我是这样申请的：
<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | reverseOrder )">
<h3>{{ day | date: mediumDate }}</h3>
</div>
回答by aron.duby
Recently had the same issue. groupBycreates an object, but the orderByneeds an array, so there's a little bit of funkiness involved. I ended up getting the answer straight from their issues page where one of the authors does an excellent job of explaining it complete with code samples that was basically copy/paste for me.
最近有同样的问题。groupBy创建一个对象，但orderBy需要一个数组，所以有一点点时髦。我最终直接从他们的问题页面上得到了答案，其中一位作者出色地解释了它，并附上了代码示例，这些示例基本上是我复制/粘贴的。
https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792
https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792
回答by Roi
It appears the propermethod is to use the | toArray: true | orderBy: customMappingFunction, however, I found the performance on this to be terrible. I came up with a solution that keeps performance up and produces the correct result -- (although it does seem a bit odd!)
看起来正确的方法是使用| 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>
For whatever reason, adding the -does force the groupByto sort correctly, but it also adds it to the key, so we can just remove it!
无论出于何种原因，添加-确实会强制groupBy正确排序，但它也会将其添加到key，因此我们可以将其删除！
回答by Sairam Krish
We can achieve this by ordering the data in controller & converting groupBy output to Array.
我们可以通过对控制器中的数据进行排序并将 groupBy 输出转换为数组来实现这一点。
In controller, order the records before sending it to view :
在控制器中，在发送之前对记录进行排序以查看：
$scope.events = $filter('orderBy')(events, '-date');
Now the template, receives data in sorted order. After grouping, we need to transform it to Array :
现在模板按排序顺序接收数据。分组后，我们需要将其转换为 Array ：
<div ng-repeat="(day, dayEvents) in events | groupBy: 'date' | toArray:true )">
<h3>{{ day | dayEvents[0].date: mediumDate }}</h3>
</div>
回答by Chris
An easier way to reverse an array is to use the code from 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>
回答by Satyaki
try using -
尝试使用 -
<div ng-repeat="(day, dayEvents) in events | groupBy: '-date' ">
P.S- I have not used groupBy till now anywhere!But this minus thing works well with orderBy attribute!
PS- 到目前为止，我还没有在任何地方使用过 groupBy！但是这个减号与 orderBy 属性配合得很好！
