1

angular-ui のui-select2 ドキュメントは、次のようなことができることを示しています。

myAppModule.controller('MyController', function($scope) {
    $scope.select2Options = {
        allowClear:true
    };
});
<select ui-select2="select2Options" ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

ただし、それ以降に $scope.select2Options を変更しても何も起こりません。その場合、ui-select2 が select2Options の変更を監視し、変更されたときにそれらを select2 に送信するとよいでしょう。

選択内容に応じて maximumSelectionSize を動的に変更する必要があります。コントローラーで DOM をいじってはならないため、次のようなことを行うのは明らかに間違っています。

<select id="mySelect2" ui-select2="{ allowClear: true}" ng-model="select2" ng-change="selectChange()">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

コントローラーの内部:

$scope.selectChange = function() {
    if(...) {
        $("#mySelect2").select2({ maximumSelectionSize: 1 });
    } else {
        $("#mySelect2").select2({ maximumSelectionSize: 0 });
    }
}

コントローラーで DOM を使用せずに、これらのタイプのオプションを select2 に渡すにはどうすればよいですか? (ディレクティブを介してこれを行うクリーンな方法を思いつくことができませんでした。)

ありがとう!

アップデート:

https://stackoverflow.com/a/16962249/405026、Stewie の回答、および私自身のテストに基づいて、次のコードを angular-ui ui-select のリンク メソッドに追加しました。

try {
    scope.uiSelect2 = angular.fromJson(attrs.uiSelect2);
} catch(e) {
    scope.$watch(attrs.uiSelect2, function (opts) {
        if (!opts) return;
        elm.select2(opts);
    }, true);
}

ui-select2 属性がオブジェクト リテラルまたはスコープ上のオブジェクトである可能性がある場合を処理するより良い方法はありますか?

4

1 に答える 1