Come ottenere l'inizializzazione corretta dei tag Select2 con l'interfaccia utente angolare quando vengono utilizzati i gruppi di opzioni?

Question

Ho cercato di far inizializzare la mia direttiva ui select2 angolare e non sono riuscito a farlo funzionare con i gruppi di opzioni.

Il Codice:

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

Il codice 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: ho creato il seguente jsfiddle.

Durante questa operazione, ho notato che sarebbe stato inizializzato correttamente se includessi una seconda direttiva select2 che non includeva i gruppi di opzioni (strano). Ho notato qualche altro strano comportamento includendo la seconda select2, ma non sono troppo preoccupato perché il mio obiettivo è solo quello di far funzionare testCtrl1.

Answer 1

Scarica ultima angolare-ui select2 e aggiornamento linea 24:

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

Ora i suoi gruppi di opzioni di supporto.

Answer 2

select2 supporta <optgroup> attraverso i dati gerarchici, è possibile per il pass-through un oggetto strutturato come dati invece di utilizzare ng-repeat, vedere
http://ivaynberg.github.io/select2/#data_array
Ricerca anche per "Esempio dati gerarchici" nella pagina.

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 sarà un array di oggetti : [ {id: 1, text: 'one'} ].

Per pass-through tramite la direttiva, vedere la demo di angolare UI:
http://plnkr.co/edit/gist:4279651?p=preview

EDIT: codice di aggiornamento e riferimento al sito

Answer 3

Beh, ho raggiunto lo stesso ostacolo e voglio condividere la mia soluzione. Select2 non stava guardando l'attributo optgroup ng-repeat. Devi aggiungere questo alla tua direttiva ui select2 angolare.

Modifica questo:

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

A tal:

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

Non sono sicuro se questa è una soluzione pulita, ma funziona per me.

Github issue