21

データを取得するためのカスタム クエリを使用して、国を複数選択するための 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);
},

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

4

2 に答える 2

8

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);
},

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

于 2013-08-16T05:00:57.330 に答える