AngularJS:先分组后排序

AngularJS: GroupBy then Sort

本文关键字：排序 AngularJS      更新时间：2023-09-26

我有一个集合，在使用ng-repeat在UI中显示之前，我使用lodash.js groupBy对其进行分组

    var list = [{id:1,categoryId:1,name:test1},
                {id:2,categoryId:2,name:test2},
                {id:3,categoryId:12,name:test12}]
    vm.myList= _.groupBy(list,function (j) { return j.categoryId; });
    console.debug(vm.myList) // this shows the correct ordering!!!

现在，当我使用ng-repeat显示它时，它会打乱顺序

<div ng-repeat="(categoryId, details) in vm.myList| orderBy: 'categoryId'>
        {{ categoryId }}
</div>

这将显示

1
12
2

如何显示

1
2
12

我正在尝试这样做，但没有运气

<div ng-repeat="(categoryId, details) in vm.myList| orderBy: 'parseInt(categoryId)'>
            {{ categoryId }}
    </div>

更新!我发现这在Angular 1.4中不是问题。x。不幸的是，我们使用的是旧版本的Angular 1.3.x

首先，orderBy过滤器只能与数组一起工作，所以如果您尝试将对象传递给它，将原样返回传递的对象。

second，带ngRepeat

您需要注意，JavaScript规范没有定义对象返回的键的顺序。(为了在Angular 1.3中缓解这个问题，ngRepeat指令使用了按字母顺序对键进行排序。)

1.4版本删除了字母排序。

如果不希望这样做，建议的解决方法是在将对象提供给ngRepeat之前将其转换为按您喜欢的顺序排序的数组。您可以使用toArrayFilter

这样的过滤器来实现这一点

所以为了解决你的问题，只需将你的分组对象转换为数组，并按你想要的排序。

相关文章：