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>