0

次の Angular select2 コントローラーがあるとします。

                <select ui-select2 id="projectListSelection" data-placeholder="Select a Project ..." ng-model="selectedProject">
                    @*ng-options="project.WebsiteName for project in projectList"*@
                    <option value=''></option>
                    <option ng-repeat="project in projectList" ng-value="'{{ project.WebsiteGUID }}'">{{project.WebsiteName}}</option>
                </select>

モデル データは、コントローラーから次のように取得されます。

    $scope.projectList = dataFactory.getList("")   // no parameters
                            .success(function (result) {
                                $scope.projectList = result.value;
                                $("#projectListSelection").select2({ width: '240' });
                            })
                            .error(function (error) {
                                customUIFunctions.showError("Data Error - Unable to Load Project List"); // use default error message
                                console.log("data error");
                            });

問題は次のとおりです。

  1. コントロールが最初に画面に表示されたときは、昔ながらのselectドロップダウン コントロールのように見えます
  2. 一瞬、幅が 0 になる
  3. コントロールの UI は、コントロールのように見えるように再び更新されますが、select2その幅はプレースホルダーと同じくらい小さいだけです。
  4. コントロールにデータがロードされた後、240px にサイズ変更されます

データが取得される前 (前$scope.projectList = ...) に幅を設定しようとすると、次のエラーが発生します。

Select2 s2id_projectListSelection に対してクエリ関数が定義されていません ... angular.js:9402 RangeError: 最大コール スタック サイズを超えました ...

DOM が完全にロードされていないため、これは理にかなっています。そう...

     $(document).ready(function () {
        $("#projectListSelection").select2({ width: '240' });
    });

ただし、幅が最初にプレースホルダーに準拠し、次にデータが読み込まれると幅の広い設定に準拠するという同じ問題がまだ見られます。

私はこれを回避することができました：

<select ui-select2 id="projectListSelection" style="width:240px;" . . .

しかし、それはちょっと醜いです。

質問：

  1. データがロードされているかどうかに関係なく保持される幅オプションはありますか?
  2. 「データを読み込んでいます...」などのメッセージを表示してから、別のメッセージを表示できるプレースホルダーオプションはありますか? データがロードされたら「プロジェクトを選択してください...」？
4

1 に答える 1

0
  1. ここでの最良のオプションは、おそらくデフォルトをオーバーライドするカスタム CSS です。
  2. 「Loading data...」の初期値で呼び出されるコントローラースコープに変数を作成しplaceholder、データが読み込まれるのを監視して、scope.placholder を「Select a Project...」に変更します。次に、要素で placeholder="{{ placeholder }}" を使用します
于 2014-06-04T04:25:01.953 に答える