4

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

developer10
  • 1,450
  • 2
  • 15
  • 31
  • 2
    Too bad this question is not receiving enough attention. I believe it would be useful is anyone at least explains if this is possible or not. I thank in advance to such a person! – developer10 Nov 10 '14 at 12:32
  • i ran across your question while searching something related to ui-select. so excuse me if it is too late :) – ysf Nov 26 '14 at 13:53
  • 1
    there is no way to implement a repeater that satisfies your use case. However, i believe the answer to your question lies under the model you want to implement. i.e. based on your explanation i assume that your model is the disease object. if this is the case then you can solve your problem by putting category to every disease object. in that way you don't lose optgroups and you can allow users to select a disease. – ysf Nov 26 '14 at 13:59

0 Answers0