I am using UI-Select (select2 theme) with an array of data that is returned in the following form:
Array of Objects [
0: Object {
category: "Category name, to be used as optgroup label",
options: [
0: Object {
id: 5,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 6,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 7,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
1: Object {
category: "Another category name, to be used as second optgroup label",
options: [
0: Object {
id: 44,
name: "Some name, to be used as an option under the above optgroup",
}
1: Object {
id: 45,
name: "Some name, to be used as an option under the above optgroup",
}
2: Object {
id: 47,
name: "Some name, to be used as an option under the above optgroup",
}
]
}
]
My optgroups creation function:
$scope.createOptGroups = function(item){
return item.category;
};
and he really creates my optgroups properly.
The problem here is as follows. To be able to create opt groups, I need to be at that level:
<ui-select multiple ng-model="diseaseObject.chosenDiseases.states">
<ui-select-match placeholder="Start typing disease name or click in the box...">{{$item}}</ui-select-match>
<ui-select-choices
group-by="createOptGroups"
repeat="state in diseaseObject.allStates | filter: $select.search track by $index">
{{state}}
</ui-select-choices>
</ui-select>
If you're interested in what is the result of this code, take a look at this pic: http://screencast.com/t/S2VBuK1jXtA
, , , propertyName.
... , optgroups! , category.
state : state.options. - , . , ( - <span ng-repeat="name in state.options">{{name}}</span>), . , (ui-select) .
group-by, optgroups ( ), .
. : http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview