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. 在您的控制器范围内创建一个名为placeholder“正在加载数据...”的初始值的变量，然后观察您的数据以加载并将 scope.placholder 更改为“选择一个项目...”。然后在你的元素上使用 placeholder="{{ placeholder }}"
于 2014-06-04T04:25:01.953 回答