大佬教程收集整理的这篇文章主要介绍了AngularJS select首项空白问题解决方案，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

原因

ng-model绑定的是后台的默认项，与select中是不同的引用。意思也就是说，现在select中没有初始值，所以会有空白。

解决方案

肯定是给select的赋初始值。

方法一：用ng-options 语句加as，ng-init来初始化select 或者 在控制器中初始化

ng-model="sysType" ng-init="sysType=1" ng-options="x.id as x.type for x in sysNames"

缺点：失去了对象的优势，选择的是字符串。

方法二：在select中加一个value值为空的option

<select ng-model="selectedSite">

<option value="">请选择</option><!-- 这里是重点，必须将value值设置成空字符串，否则第一个选项还是会留空白出来-->

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select>

缺点：增加了多余的代码，不想有请选择时，这种方法不适合。

方法三：在控制器中给option赋初始值

<select ng-model="selectedSite">

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select> 

$scope.selectedSite=$scope.sites[0].url;<!-- 这里只要把想要第一次出来的url放在这里就可以实现option默认出现的效果了-->

用这种方法改动html少点。所以选择了这种。

参考了一些网上的资料，总结如上。

这篇比较好：http://blog.csdn.net/linzhiqiang0316/article/details/52489668

更新于2017.7.19

相关知识：

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

大佬总结

以上是大佬教程为你收集整理的AngularJS select首项空白问题解决方案全部内容，希望文章能够帮你解决AngularJS select首项空白问题解决方案所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。