Angularjs: ng-options group by

眉间皱痕 提交于 2019-11-26 11:29:01

问题


I have this one level tree situation:

<select ng-model=\"tipost\" 
        ng-options=\"tip.DESC group by tip.TIPIS for tip in tipall\"><br>
</select>



where the json is:

[
  {\"ID\":\"1\", \"IDPARENT\":\"0\", \"TIPIS\":\"\", \"DESC\":\"GroupName1\"},
  {\"ID\":\"2\", \"IDPARENT\":\"1\", \"TIPIS\":\"GroupName1\", \"DESC\":\"CHILDNAME1\"},
  {\"ID\":\"3\", \"IDPARENT\":\"0\", \"TIPIS\":\"\", \"DESC\":\"GroupName2\"}
]


the problem is that this creates the optgroups with their children but repeats the roots too:

- GroupName1
- GroupName2
[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]


i want to produce:

[ GroupName1 ]
- CHILDNAME1
[ GroupName2 ]



回答1:


The grouping doesn't quite work like that, if you change your json to something like this:

[
 {"ID":"1", "TIPIS":"GroupName1", "DESC":"name"},
 {"ID":"2", "TIPIS":"GroupName1", "DESC":"name1"},
 {"ID":"3", "TIPIS":"GroupName2", "DESC":"name2"},
 {"ID":"4", "TIPIS":"GroupName1", "DESC":"name3"},
]

Then you'll get the grouping the way you want

jsFiddle: http://jsfiddle.net/rtCP3/182/




回答2:


The simple drop down that can display items with and without groups, and also you can set some items as disabled: Here is plunk: https://plnkr.co/edit/uhsn4lmzssi6rrijPEAp?p=preview

 <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>



回答3:


I was searching for same question and found better answer. One can use function to return data as he needs, like in query below 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



来源:https://stackoverflow.com/questions/18615624/angularjs-ng-options-group-by

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!