Question

给出以下Angular selec2控制器：

                <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
控件的用户界面再次更新，看起来像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;" . . .

然而，那种丑陋。

问题：

是否存在宽度选项，无论数据是否已加载，该选项都将成立？
是否有占位符选项可以显示消息，例如＆＃34;正在加载数据...＆＃34;然后显示不同的消息，即。＆＃34;选择一个项目......＆＃34;加载数据后？

Answer 1

这里你最好的选择可能是自定义CSS，它会覆盖默认值。
在控制器范围内创建一个名为placeholder的变量，其初始值为＆＃34;正在加载数据...＆＃34;然后注意你的数据加载并将scope.placholder更改为＆＃34;选择一个项目...＆＃34;。然后在您的元素上使用placeholder =＆＃34; {{placeholder}}＆＃34;

Angular ui-select2指令是否有适用的选项？

1 个答案: