Wie werden Select2-Tags korrekt mit Angular UI initialisiert, wenn Optionsgruppen verwendet werden?

Question

Ich habe versucht, meine eckige ui select2-Direktive zu initialisieren und konnte es nicht mit Optionsgruppen arbeiten.

Der Code:

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

Die 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> 

Die Fiddle: Ich habe die folgende jsfiddle.

Während ich dies tue merke ich, dass es richtig initialisiert würde, wenn ich eine zweite select2-Direktive, die die Option Gruppen (seltsam) nicht enthalten würde. Ich bemerke ein anderes merkwürdiges Verhalten, wenn ich das zweite select2 einschließe, aber ich bin nicht allzu besorgt darüber, da mein Ziel nur ist, testCtrl1 zum Laufen zu bringen.

Answer 1

Herunterladen neuesten Winkel-ui select2 und Update-Linie 24:

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

Jetzt unterstützt es Optionsgruppen.

Answer 2

select2 unterstützt <optgroup> durch hierarchische Daten, können Sie stattdessen ng-repeat die Verwendung ein strukturiertes Objekt als Daten-Pass-Through finden
http://ivaynberg.github.io/select2/#data_array
Auch für die "Beispiel Hierarchical Data" in der Seite.

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 wird ein Array von Objekte sein: [ {id: 1, text: 'one'} ].

Für Passthrough über die Richtlinie finden Sie Angular UI-Demo:
http://plnkr.co/edit/gist:4279651?p=preview

EDIT: Update-Code und den Verweis auf Website

Answer 3

Nun, ich bin auf das gleiche Hindernis gekommen und möchte meine Lösung teilen. Select2 beobachtete das optgroup ng-repeat-Attribut nicht. Sie müssen dies zu Ihrer eckigen ui select2-Direktive hinzufügen. diese

Wechsel:

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

Um das:

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

Nicht sicher, ob dies eine saubere Lösung ist, aber es funktioniert für mich.

Github issue