AngularJS select选择框初始化问题

Angularjs select初始化问题

问题描述：

angularjs 中的select往往会遇到选择框没有初始化的问题，表现形式就是一开始为空，但是选择后空白就消失。十分难看。

解决方案：

比如说如下的select：

<select ng-model="step.dataSource" ng-options="item.codeValue for item in dataSources"></select>

如果不初始化的话就会遇到如上所述的问题。

我推荐这么解决：

step.dataSource = dataSources[0];

这样ng-model就有一个初始化的值，不会有空格。

有时候遇到需要更加复杂的显示效果时，这种解决方式可能满足不了。但是我尝试过ng-repeat+ng-selected，效果并不好，所以建议使用如上的方式，遇到需要复杂的选项的时候再封装一层，比如：

//用于解决Select标签初始化问题的封装
            scope.perPageList = [];
            scope.perPageSelect = null;

            /**
             * 将真实数据刷新入封装
             */
            var refreshPerPageList = function () {
                scope.perPageList = [];
                for (var i = 0;i < conf.perPageOptions.length;i ++){
                    var tempPerPageItem = {};
                    tempPerPageItem.value = conf.perPageOptions[i];
                    tempPerPageItem.view = tempPerPageItem.value + "条/页";
                    scope.perPageList.push(tempPerPageItem);
                    if (conf.perPageOptions[i] == conf.itemsPerPage){
                        scope.perPageSelect = scope.perPageList[i];
                    }
                }
                //console.log(scope.perPageList);
                //console.log(scope.perPageSelect);
            }

在页面中这么写

<select ng-model="perPageSelect" ng-options="option.view for option in perPageList " ng-change="changeItemsPerPage()"></select>