Optgroups with ui-select (new version) when the actual parameters are lower than what should be used for optgroups

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

+4

All Articles