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>