角。jsはngOptionsで選択します:Optgroupにラベルを付ける

Question

私はちょうどAngularで遊び始めました。jsとngOptionsについて質問があります:Optgroupにラベルを付けることは可能ですか？

車とガレージの2つのオブジェクトを想定しましょう。

cars = [
    {"id": 1, "name": "Diablo", "color": "red", "garageId": 1},
    {"id": 2, "name": "Countach", "color": "white", "garageId": 1},
    {"id": 3, "name": "Clio", "color": "silver", "garageId": 2},
    ...
]
garages = [
    {"id": 1, "name": "Super Garage Deluxe"},
    {"id": 2, "name": "Toms Eastside"},
    ...
]

このコードで私はほぼ私が望む結果を得ました:

ng-options = "car.id as car.name + ' (' + car.color + ')' group by car.garageId for car in cars"

結果を選択します:

-----------------
1
 Diablo (red)
 Countach (white)
 Firebird (red)
2
 Clio (silver)
 Golf (black)
3
 Hummer (silver)
-----------------

しかし、私は"ガレージ1"、"ガレージ2"、のようなoptgroupsにラベルを付けたいと思います。..または、garageIdだけでなく、ガレージの名前を表示する方が良いでしょう。

ザ- angularjs.org selectのドキュメント optgroupのラベルについては何も言いませんが、次のようにngOptionsの一部でグループを拡張したいと思います group by car.garageId as 'Garage ' + car.garageId または group by car.garageId as getGarageName(car.garageId) - これは悲しいことに機能していません.

これまでの私の唯一の解決策は、新しいプロパティ「garageDisplayName」をcarオブジェクトに追加し、そこにid+garage名を保存し、それをgroup byパラメータとして使用することです。しかし、ガレージ名が変更されるたびにすべての車を更新したくありません。

OptgroupsにngOptionsラベルを付ける方法はありますか、その場合はngRepeatを使用する必要がありますか？

Answer 1

あなたはただ電話することができます getGarageName() の中で group by を使用せずに as...

ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"

各車にガレージidを格納するのではなく、garages配列にgarageオブジェクトへの参照を格納することを検討することをお勧めします。そうすれば、ガレージの名前を変更することができ、それぞれの車を変更する必要はありません。そして、 group by 単になります。..

group by car.garage.name