8

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を作成しました。

そうしているうちに、オプショングループを含まない2番目のselect2ディレクティブを含めると、正しく初期化されることに気付きました(奇妙な)。2 番目の select2 を含めると、他の奇妙な動作に気付きますが、私の目標は testCtrl1 を機能させることだけなので、あまり気にしません。

4

3 に答える 3

4

最新の angular-ui select2 をダウンロードし、24 行目を更新します。

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

オプショングループをサポートするようになりました。

于 2013-08-14T09:59:15.683 に答える
1

select2<optgroup>を使用する代わりに、構造化されたオブジェクトをデータとして渡すことができます。http://ivaynberg.github.io/select2/#data_arrayng-repeatを参照 してください。ページで「階層データの例」も検索してください。


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

編集:コードとサイトへの参照を更新します

于 2013-04-24T19:21:46.670 に答える