AngularJS - ngOptions：如何按组名排序，然后按标签排序

Question

假设我有以下这种形式的数据数组：

var data = [{group:GroupA, label: BB}, {group:GroupB, label: DD}.....].

我的绑定可能会是这样：

<select data-ng-options="c as c.label group by c.group for c in data"></select>

我希望下拉列表能够在将所有GroupA的项目列出之前，也对每个组内的项目进行排序。

具体实现像这样：

GroupA
AA
BB
CC

GroupB
DD
EE
FF

我知道我可以使用orderBy Angular过滤器，但那并不是我需要的方式。我猜我必须编写一个自定义过滤器来手动按照我的意愿排序列表，但我想知道是否有更简单的方法来完成这个任务。

- T.Ho

Answer 1

orderBy 可以接受一个包含多个参数的数组进行排序。因此，您可以这样做：

c as c.label group by c.group for c in data | orderBy:['group','label']

这里是一份 JSFiddle

- Dan

---

谢谢。我没有意识到你可以将一个数组传递给 orderBy。我想我在 AngularJS 的文档中忽略了这一部分。但至少我知道肯定会有更简单的方法，因为那是一个非常常见的用例。 - T.Ho

你能否使用这个方法指定排序顺序？例如，我想按组升序排序，然后按标签降序排序？ - Ross Jones

是的，你需要将['group','label']更改为['+group','-label']。 - Dan

对我来说完美地工作了。谢谢。 - Tony Brasunas

Answer 2

似乎orderBy正好符合您的需求。只需将表达式添加到末尾即可：

c as c.label group by c.group for c in data | orderBy:'label'

这将首先按每个项目的标签属性值对数据数组进行排序，然后进行分组。由于数据已被正确排序，因此每个组将以正确的顺序显示。

这里是一个演示。

请注意，初始数组是以相反的顺序定义的，但在选择器中每个组中都被正确排序。

- satchmorun

---

这并不能保证在Group B之前一定是Group A。如果你的Group A只包含“GG，HH，II”，那么顺序会被颠倒。我猜我举的例子不太好。:P。实际上，我通过先按组排序，如果两个组相同，则按标签值排序，就能使它正常工作了。 - T.Ho