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 ]

Foretop

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

Melodimelodia

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. – Foretop

Do you want the "roots as options when they don't have a child" selectable? – Melodimelodia

yes because desc and tipis is the same thing.. and this way is duplicating.. the optgroup is equal to the first option. – Foretop

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. – Melodimelodia

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.. – Foretop

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. – Foretop

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

Stagecoach

Answer 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

Haematopoiesis