Question

我有一个集合，我使用lodash.js groupBy将其分组，然后使用ng-repeat在UI中显示

    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>

UPDATE！我发现这不是Angular 1.4.x中的问题。不幸的是，我们使用的是旧版Angular 1.3.x

Answer 1

首先，orderBy过滤器仅适用于数组，因此如果尝试将对象传递给它，将按原样返回传递的对象。

第二，ngRepeat

您需要知道JavaScript规范没有定义为对象返回的键的顺序。（为了在Angular 1.3中缓解这种情况，使用ngRepeat指令按字母顺序对键进行排序。）

1.4版删除了字母排序。

如果不需要，建议的解决方法是将对象转换为一个数组，该数组在提供给ngRepeat之前按照您喜欢的顺序排序。您可以使用toArrayFilter
等过滤器执行此操作

因此，要解决您的问题，只需将您的分组对象转换为数组，然后根据需要对其进行排序。

AngularJS：GroupBy然后排序

1 个答案: