Angularjs: ng-options group by

Question

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 ]

score 37 · Accepted Answer · answered Sep 04 '13 at 13:51

37

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/

answered Sep 04 '13 at 13:51

Mathew Berg

28,625
11
69
90

Thats right but is there any way to show the roots as options when they don't have any child and as an optgroup when they have? this way i can see roots as optgroup and as option of that group. – daniel Sep 04 '13 at 14:16
Do you want the "roots as options when they don't have a child" selectable? – Mathew Berg Sep 04 '13 at 14:20
yes because desc and tipis is the same thing.. and this way is duplicating.. the optgroup is equal to the first option. – daniel Sep 04 '13 at 14:22
But if the optgroup has children, you don't want the optgroup selectable? Normally you can't select optgroups, you'd have to make them a child. – Mathew Berg Sep 04 '13 at 14:43
in fact i don't want to select them... but there are cases when roots are selectable and this in this cases i want roots to be options and not optgroups with the same label option.. – daniel Sep 04 '13 at 14:54
1

Ok i have some kind of solution... if i get all the elements that have no chidren... this way i can get options of roots with no elements... and every optgroup with just children. so if the group of roots (tipis is '') then it will be just an option... while if tipis has some value it will be inside an optgroup. Thanks for the direction. – daniel Sep 04 '13 at 15:06

score 7 · Answer 2 · answered May 04 '16 at 18:27

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>

score 6 · Answer 3 · answered Jan 31 '15 at 22:40

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

Angularjs: ng-options group by

3 Answers3

Linked

Related