반응형
Angularjs: ng-options 그룹화 기준
이 트리에는 다음과 같은 상황이 있습니다.
<select ng-model="tipost"
ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br>
</select>
여기서 json은 다음과 같습니다.
[
{"ID":"1", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName1"},
{"ID":"2", "IDPARENT":"1", "TIPIS":"GroupName1", "DESC":"CHILDNAME1"},
{"ID":"3", "IDPARENT":"0", "TIPIS":"", "DESC":"GroupName2"}
]
문제는 이것이 아이들과 함께 옵트 그룹을 만들지만 루트를 반복한다는 것이다.
- GroupName1
- GroupName2
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]
제작하고 싶다
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]
그룹화는 이와 같이 동작하지 않습니다.json을 다음과 같이 변경하면 다음과 같습니다.
[
{"ID":"1", "TIPIS":"GroupName1", "DESC":"name"},
{"ID":"2", "TIPIS":"GroupName1", "DESC":"name1"},
{"ID":"3", "TIPIS":"GroupName2", "DESC":"name2"},
{"ID":"4", "TIPIS":"GroupName1", "DESC":"name3"},
]
그러면 원하는 방식으로 그룹을 구성할 수 있습니다.
jsFiddle : http://jsfiddle.net/rtCP3/182/
그룹이 있는 항목과 없는 항목을 표시할 수 있는 단순 드롭다운. 또한 일부 항목을 실행 중지 상태로 설정할 수도 있습니다.여기 plunk가 있습니다.
<select ng-model="ddl.selected"
ng-options="item.id as item.text group by item.groupName disable when item.enabled===false for item in ddl.items"></select>
나는 같은 질문을 찾다가 더 나은 답을 찾았다.getGarageName 아래 쿼리와 같이 필요에 따라 데이터를 반환하는 기능을 사용할 수 있습니다.
ng-options="car.id as car.name + ' (' + car.color + ')' group by getGarageName(car.garageId) for car in cars"
// this is the data
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"},
...
]
http://www.wenda.io/questions/2597799/angular-js-select-with-ngoptions-label-the-optgroup.html
언급URL : https://stackoverflow.com/questions/18615624/angularjs-ng-options-group-by
반응형
'programing' 카테고리의 다른 글
리액트 리플릿 맵이 올바르게 표시되지 않음 (0) | 2023.03.20 |
---|---|
HttpClient에서 JSON 문자열을 해석하려면 어떻게 해야 하나요? (0) | 2023.03.15 |
AngularJS에서 객체 데이터 소스를 ng-repeat으로 정렬하려면 어떻게 해야 합니까? (0) | 2023.03.15 |
Mongodb에서의 문서 갱신 및 반환 (0) | 2023.03.15 |
ReactJs: 여러 번 버튼 누름 방지 (0) | 2023.03.15 |