web-dev-qa-db-ja.com

AngularJs-ngOptions:グループ名、ラベルの順に並べる方法

この形式で次のデータ配列があると仮定します。

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フィルターを使用できることはわかっていますが、それは実際に必要な方法では機能しません。しかし、私はタスクを達成する簡単な方法があるかどうか疑問に思っていました。

31
T.Ho

orderByは、順序付けするために複数のパラメーターの配列を取ることができます。だからあなたができる:

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

ここにフィドルがあります

50
Dan

orderByはあなたが望む通りに動作するようです。

式を取り、最後にorderByを追加するだけです:

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

これにより、最初に各アイテムのdataプロパティの値でlabel配列が順序付けられ、次にそれらがグループ化されます。データは正しく順序付けされているため、各グループは正しくソートされて表示されます。

これはフィドルです

初期配列が逆順に定義されているが、selectの各グループで正しくソートされていることに注意してください。

1
satchmorun