棱角分明。js选择与ngOptions:标记选择组

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 选择文件 没有说关于optgroup的标签，但我想通过ngOptions的一部分扩展该组，如 group by car.garageId as 'Garage ' + car.garageId 或 group by car.garageId as getGarageName(car.garageId) - 可悲的是，这是行不通的.

到目前为止，我唯一的解决方案是向car对象添加一个新属性"garageDisplayName"，并将id+车库名称存储在那里，并将其用作group by参数。但我不想在车库名称更改时更新所有汽车。

有没有办法用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"

您可能需要考虑在garages数组中存储对garage对象的引用，而不是在每辆车中存储garage id。这样，您就可以更改车库名称，并且无需更改每辆车。而 group by 简单地成为。..

group by car.garage.name