当使用选项组时，如何使用Angular UI正确初始化Select2标签？

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.

我一直试图让我的角度ui select2指令初始化，并且无法让它与选项组一起使用。

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:

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.

小提琴：我创造了以下的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.

虽然这样做，但我注意到如果我包含第二个不包含选项组的select2指令（奇怪），它将正确初始化。当我包括第二个select2时，我注意到其他一些奇怪的行为，但我并不太关心它，因为我的目标只是让testCtrl1工作。

3 个解决方案

#1

Download latest angular-ui select2 and update line 24:

下载最新的angular-ui select2并更新第24行：

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

Now its supports option groups.

现在它支持选项组。

#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.

好吧，我已经遇到了同样的障碍，想要分享我的解决方案。 Select2没有观看optgroup ng-repeat属性。您必须将此添加到angular ui select2指令中。

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

Github问题

#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.

select2通过分层数据支持，您可以将结构化对象作为数据传递而不是使用ng-repeat，请参阅http://ivaynberg.github.io/select2/#data_array并搜索“示例分层数据”在页面中。

JS:

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:

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'} ].

selectedOptions将是一个对象数组：[{id：1，text：'one'}]。

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

有关通过指令的传递，请参阅Angular UI的演示：http：//plnkr.co/edit/gist：4279651？p = preview

EDIT: update code and reference to site

编辑：更新代码和对网站的引用