programing

Angularjs: ng-options 그룹화 기준

megabox 2023. 3. 15. 19:31
반응형

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

반응형