web-dev-qa-db-ja.com

Angular-UISelect2複数ディレクティブの初期値の設定

データを取得するためのカスタムクエリを使用して、複数の国を選択するためのselect2ディレクティブがあります。

// Directive
<input ng-model="filters.countries" ui-select2="filters.countryOptions"
    data-placeholder="Choose a country...">

// filters.countryOptions
{ 
    multiple: true,
    query: function() { 
        get_list_of_countries(); 
    }
}

// Formatted data from remote source
[
    {id: 'US', text: 'United States'},
    {id: 'CA', text: 'Canada'} ...
]

最初に選択した値をコントローラで設定しようとしています：

$scope.filters.countries = [{id: 'US', text: 'United States'}];

これはモデルを正しく設定しますが、これはselect2の初期化が行われる前に発生します。残りの初期化コードをステップ実行すると、入力は一時的に[Object]を表示してから、最終的に$scope.filters.countriesと入力を空白にしますが、入力内のプレースホルダーテキストは表示されません。

これを回避するために、モデルの初期値をリセットするために以下を使用しています：

$scope.$on('$viewContentLoaded', function() {
    setTimeout(function() {
        $scope.filters.countries = [{id: 'US', text: 'United States'}];
    }, 100);
});

setTimeoutを使用するのは本当にハックなようです。私が行方不明になっているより良い方法はありますか？

アップデート1

ProLoserから要求されたとおり、ここにデモとgithubチケットがあります。

デモ： http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHubの問題： https://github.com/angular-ui/angular-ui/issues/455

ProLoserのアドバイスに従って、select2のinitSelection関数を使い始めました。

initSelection : function (element, callback) {
  callback($(element).data('$ngModelController').$modelValue);
},

それはトリックを行いますが、それでも回避策のように感じます。

angularjsjquery-select2angular-ui
21
SethBoyd

ProLoserからのリクエストに応じて、ここにデモとgithubチケットがあります。

デモ： http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHubの問題： https://github.com/angular-ui/angular-ui/issues/455

ProLoserのアドバイスに従って、select2のinitSelection関数を使い始めました。

initSelection : function (element, callback) {
  callback($(element).data('$ngModelController').$modelValue);
},

それはトリックを行いますが、それでも回避策のように感じます。

8
Pablo