Angular ng-repeat groupBy 和 Keep order答案

【问题标题】：Angular ng-repeat groupBy and Keep orderAngular ng-repeat groupBy 和 Keep order
【发布时间】：2014-09-18 20:04:59
【问题描述】：

我正在使用这个过滤器https://github.com/a8m/angular-filter#groupby 来对我的数据进行排序，效果很好：

<div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' ">

现在我试图按 category.order 保持这些组的顺序。

这可能吗？

我试着像这样管道它：

<div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' | orderBy:'category.order' ">

但这并没有什么区别

【问题讨论】：

标签： javascript html angularjs angularjs-directive ionic-framework

【解决方案1】：

orderBy 过滤器不适用于ngRepeat 中的对象。所以，你可以做的是这样的：

<!-- 
     Note: toArray filter also attaches a new property $key
     to the value containing the original key that was used in the object. 
-->

<div ng-repeat="tags in tagsList | groupBy:'prop' | toArray:true | orderBy:'$key'">
  Group name: {{ tags.$key }}
  <p ng-repeat="tag in tags | orderBy:'prop'">
     {{ tag.name }}
  </p>
</div>

请参阅：toArray 过滤器

【讨论】：

每次我对数组中的对象进行编辑时都会刷新我的列表，现在会导致性能问题，我认为这与 ToArray 有关，有什么办法吗？

【解决方案2】：

groupBy 应该始终是 ng-repeat 中的最后一个。所以首先设置 orderBy 和最后设置 groupBy 然后你可以使用 track by $index 所以正常的 ng-repeat 将是。

ng-repeat="item in items orderBy:'price' | groupBy:'name' track by $index"

... 希望它对它有帮助，即使它有点晚了！

【讨论】：

items 和 orderBy 之间缺少一个 |

【解决方案3】：

对于 djsiz 的部分答案（不需要跟踪，它缺少管道），您可以这样做：

<div ng-repeat="(key, value) in tags.tags.objects | orderBy:'category.order' | groupBy:'category.name'">

groupBy 创建一个对象，但 orderBy 需要一个数组...如果您在分组之前 orderBy，它应该正确排序

https://jsfiddle.net/r0m4n/kfho6r26/

【讨论】：