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

Posted 2023-02-27

【中文标题】AngularJS - ngOptions：如何按组名然后按标签排序

【英文标题】：AngularJS - ngOptions: How to order by Group Name and then by Label

【发布时间】：2013-06-09 04:00:22

【问题描述】：

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

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>

我希望下拉列表在GroupB 之前列出所有带有GroupA 的项目，同时在每个组下也对它们进行排序。

类似这样的：

GroupA
AA
BB
CC

GroupB
DD
EE
FF

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

【参考方案1】：

似乎orderBy 会完全按照您的意愿工作。

只要把你的表情加在最后：

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

这将首先按照每个项目的label 属性的值对data 数组进行排序，然后对它们进行分组。因为数据已经正确排序，所以每个组都会正确排序。

Here's a fiddle.

注意初始数组是如何按倒序定义的，但在选择中的每个组中都正确排序。

【讨论】：

这实际上并不能保证A组在B组之前。如果A组只包含“GG，HH，II”，则顺序将被颠倒。我想我举了一个不好的例子。 :P。实际上，我可以先按组排序，如果两个组相同，则按标签值排序。

【参考方案2】：

orderBy 可以接受一个包含多个参数的数组来排序。所以你可以这样做：

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

Here is a fiddle

【讨论】：

谢谢。我没有意识到您可以将数组传递给 orderBy。我猜我忽略了 angularjs 文档中的那部分。但至少我知道有一种更简单的方法，因为那将是一个非常常见的用例。

你能用这个方法指定一个排序顺序吗？即我想按组 asc 然后标签 desc 排序？

@RossJones 是的，您可以将 ['group','label'] 更改为 ['+group','-label']

非常适合我。谢谢