2013-06-12 9 views
28

での私は、このフォームで、次のデータ配列を持っていると仮定しましょうする方法:AngularJs - ngOptions:どのようにグループ名で注文して、ラベル

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

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

私の結合は次のようなものになるだろうGroupBの前にGroupAのすべてのアイテムをリストし、各グループの下に並べ替えるようにしたいのですが、

このようなものです。

GroupA 
AA 
BB 
CC 

GroupB 
DD 
EE 
FF 

私はorderBy Angularフィルターを使用できますが、実際には必要な方法では機能しません。私の推測では、私が望む方法で手動でリストを注文するカスタムフィルタを書く必要がありますが、タスクを達成するためのより簡単な方法があるのだろうかと思っていました。

答えて

46

orderByは、注文するために複数のパラメータの配列をとることができます。だから、行うことができます:あなたは、グループAのみ「GG、HH、II」を含むようにしている場合、実際にグループBの前に、グループAを保証しません

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

Here is a fiddle

+0

ありがとうございます。私はあなたが注文に配列を渡すことができないことを理解していませんでした。私はangularjsのドキュメントでその部分を見落とすと思います。しかし、少なくとも私はそれがかなり一般的な使用事例であるので、より簡単な方法があることを知っていました。 –

+1

この方法でソート順を指定できますか?つまり、グループascでソートしてからラベルdescをソートしたいのですか? –

+7

@RossJonesはい、 '['group'、 'label']'を '['+ group'、 ' - label']' – sh0ber

1

orderByはあなたの望みどおりに動作します。

ちょうどあなたの表現を取り、最後にORDERBYを追加します。

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

は、この最初のdata各項目のlabelプロパティの値によって配列した後、グループにそれらを注文します。データは正しく並べ替えられているため、各グループは正しく並べ替えられて表示されます。

Here's a fiddle.

初期配列を逆の順序で定義されていますが、選択中の各グループに正しくソートされているかに注意してください。

+0

は、順序が逆になります。私は悪い事例を与えたと思う。 :P。私は実際にグループ別に並べ替えることでこれを実現することができました.2つのグループが同じ場合は、ラベル値で並べ替えます。 –

関連する問題