Optgroups with ui-select (new version) when actual options are below what should be used for optgroups

1.6k Views Asked by At

I'm using UI-Select (select2 theme) with an array of data which 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 function to create optgroups:

$scope.createOptGroups = function(item){
    return item.category;
};

and it does indeed create my optgroups properly.

The issue here is the following. To be able to create optgroups I need to be at this 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 wonder what is the outcome of this code, take a look at this pic: http://screencast.com/t/S2VBuK1jXtA

So obviously the data is there but needs to be narrowed down to the desired diseaseName property. But... If I do that I'm going to lose the optgroups! I will no longer be at the level where category property is available. Another idea would be to narrow on the state like: state.options. But then the value is still an array of objects that needs iteration over itself. However, if there's an option to implement yet another repeater for the actual options (with the intention to achieve something like <span ng-repeat="name in state.options">{{name}}</span> - that would do it. I have already tried but the directive (ui-select) doesn't like it.

They have an official demo for this group-by stuff but in this particular case the function just creates optgroups as custom strings (letter spans) which is pretty different from my problem.

See the example at the very bottom: http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

0

There are 0 best solutions below