How to get Select2 tags initializing correctly with Angular UI when option groups are used?

Question

I have been trying to get my angular ui select2 directive to initialize and have been unable to get it to work with option groups.

The Code:

function testCtrl1($scope)
{
    $scope.selectedOptions = ['1'];
    $scope.categories = [
            {label: 'cat1', options: [{desc: 'one', value: 1}]}, 
            {label: 'cat2', options: [{desc: 'two', value: 2}]}
    ];
}

The HTML:

<select multiple ui-select2 ng-model="selectedOptions" style="width: 300px">
    <optgroup ng-repeat="category in categories" label="{{category.label}}">
      <option ng-repeat="option in category.options" value="{{option.value}}">{{option.desc}} - {{option.value}}</option>
    </optgroup>
</select>

The Fiddle: I created the following jsfiddle.

While doing so I notice that it would initialize correctly if I included a second select2 directive that didn't include the option groups (weird). I notice some other odd behavior when including the second select2 but I am not too concerned about it since my goal is just to get testCtrl1 working.

Flamethrower

ui-select2 isn't thoroughly tested with <optgroup>. Try opening a ticket on angular-ui/ui-select (if one doesn't already exist) or try helping us tackle this problem. – Preferment

I did here: github.com/angular-ui/angular-ui/issues/545 but it looks like that got separated into a different module now so I added it here: github.com/angular-ui/ui-select2/issues/8 – Flamethrower

Answer 1

Download latest angular-ui select2 and update line 24:

repeatOption = tElm.find( 'optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]' );

Now its supports option groups.

Euphorbiaceous

Answer 2

Well i've gotten to the same obstacle and want to share my solution. Select2 was not watching the optgroup ng-repeat attribute. You have to add this to your angular ui select2 directive.

Change this:

repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]');

To that:

repeatOption = tElm.find('optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]');

Not sure if this is a clean solution but it works for me.

Github issue

Floaty

Answer 3

select2 supports <optgroup> through hierarchical data, you can to pass-through a structured object as data instead of using ng-repeat, see
http://ivaynberg.github.io/select2/#data_array
Also search for "Example Hierarchical Data" in the page.

JS:

$scope.model = {
    data: [
        // both 'id' and 'text' are needed unless you write custom functions
        { text: 'cat1', children: [{id: 1, text: 'one'}] },
        { text: 'cat2', children: [{id: 2, text: 'two'}] }
    ]
];

HTML:

<input type="hidden" multiple ui-select2="model" 
    ng-model="selectedOptions" style="width: 300px">

selectedOptions will be an array of objects: [ {id: 1, text: 'one'} ].

For pass-through via the directive, see Angular UI's demo:
http://plnkr.co/edit/gist:4279651?p=preview

EDIT: update code and reference to site

Pigeonwing

I just tried this option: jsfiddle.net/tadchristiansen/X3pSb and the input isn't getting initialized either. The option that is selected isn't in the drop down (which works correctly) but it still doesn't display in the tags input. Thoughts? – Flamethrower

I tried to set selectedOptions as the object but without avail. Wondering if it is a bug in the object comparison code I also updated select2 to 3.3.2 but without avail. The ui-select2 directive did call select2("data") from what I see (ivaynberg.github.io/select2/#programmatic). I think the next step is debugger/logging. My fiddle: jsfiddle.net/Jhfan/3 – Pigeonwing