Angular.js ngOptions로 선택:optgroup에 라벨을 붙이세요
-
21-12-2019 - |
문제
방금 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)
-----------------
하지만 "Garage 1", "Garage 2"와 같은 optgroups 레이블을 지정하고 싶습니다.또는 GarageId뿐만 아니라 차고의 이름을 표시하는 것이 더 좋습니다.
그만큼 선택을 위한angularjs.org 문서 optgroup의 레이블에 대해서는 아무 말도하지 않지만 다음과 같은 ngOptions의 일부로 그룹을 확장하고 싶습니다. group by car.garageId as 'Garage ' + car.garageId
또는 group by car.garageId as getGarageName(car.garageId)
- 슬프게도 작동하지 않습니다.
지금까지 내 유일한 해결책은 자동차 개체에 "garageDisplayName"이라는 새 속성을 추가하고 거기에 ID + 차고 이름을 저장하고 이를 매개변수별로 그룹화하는 것입니다.하지만 차고 이름이 변경될 때마다 모든 차량을 업데이트하고 싶지는 않습니다.
ngOptions를 사용하여 optgroups에 레이블을 지정하는 방법이 있습니까? 아니면 이 경우 ngRepeat를 사용해야 합니까?
해결책
그냥 전화하시면 돼요 getGarageName()
에서 group by
사용하지 않고 as
...
ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
각 차량에 차고 ID를 저장하는 대신 차고 배열에 차고 객체에 대한 참조를 저장하는 것을 고려할 수 있습니다.이렇게 하면 차고 이름을 변경할 수 있으며 각 차량을 변경할 필요가 없습니다.그리고 group by
단순히 ...
group by car.garage.name