Angular ui-select2 指令是否有任何适用的选项？答案

【问题标题】：Are there any applicable options to Angular ui-select2 directive?Angular ui-select2 指令是否有任何适用的选项？
【发布时间】：2014-06-04 12:25:01
【问题描述】：

给定以下 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");
                            });

问题来了：

当控件第一次出现在屏幕上时，它看起来像一个普通的旧 select 下拉控件
在几分之一秒内，其宽度变为 0
控件的 UI 再次更新为类似于 select2 控件，但其宽度仅与占位符一样小
控件加载数据后，调整大小为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;" . . .

但是，这有点难看。

问题：

是否有一个宽度选项适用于是否加载数据？
是否有一个占位符选项可以让我显示诸如“正在加载数据...”之类的消息，然后显示不同的消息，即。加载数据后“选择一个项目...”？

【问题讨论】：

标签： javascript jquery angularjs ui-select2 angularjs-select2

【解决方案1】：

您最好的选择可能是覆盖默认值的自定义 CSS。
在您的控制器作用域中创建一个名为placeholder 的变量，其初始值为“正在加载数据...”，然后观察要加载的数据并将scope.placholder 更改为“选择一个项目...”。然后在你的元素上使用 placeholder="{{ placeholder }}"

【讨论】：