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

Question

我一直在尝试让我的 angular ui select2 指令初始化，但无法让它与选项组一起使用。

守则：

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

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>

小提琴： 我创建了以下jsfiddle。

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

Answer 1

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

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

现在它支持选项组。

Answer 2

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

改变这个：

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

至于：

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

不确定这是否是一个干净的解决方案，但它对我有用。

Github issue

Answer 3

select2支持<optgroup>通过分层数据，您可以将结构化对象作为数据传递而不是使用ng-repeat，参见
http://ivaynberg.github.io/select2/#data_array
同时在页面中搜索“Example Hierarchical Data”。

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 将是一个对象数组：[ {id: 1, text: 'one'} ]。

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

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