AngularJS select首项空白问题解决方案
来源:互联网 发布:浏览器软件下载 编辑:程序博客网 时间:2024/06/11 07:38
原因
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 是一个字符串。
阅读全文
0 0
- AngularJS select首项空白问题解决方案
- angularjs的SEO问题解决方案
- chm文档打开空白问题解决方案
- RenderTexture截图背景空白的问题解决方案
- 2017-05-08 angularjs的select选项去除空白行
- angularjs select 选择默认显示空白以及第一行空白的解决方法
- 基于springMVC与angularJS的跨域问题解决方案
- select option ng-repeat多空白项
- ionic(angularjs)select下拉选择第一个选项为空白的解决办法
- AngularJS系列之select下拉选择第一个选项为空白的解决办法
- AngularJS系列之select下拉选择第一个选项为空白的解决办法
- angularjs select
- angularjs select
- AngularJS select
- angularJS select
- AngularJS select
- 重装系统遇上reboot and select proper boot device ...问题解决方案
- 在select中,载入时默认select为空白,选项内不显示空白项
- 字符串操作函数之strstr和strpbrk
- 深度探索C++对象之四 --- Function语意学
- LINUX驱动注册过程失败处理不当引起的恶果
- 旋转数组的最小数字
- URAL 1893
- AngularJS select首项空白问题解决方案
- 【android学习】列表
- 膜你赛 ROAD (跑路)
- python读网页数据绘图
- IO流
- js中传递特殊字符(+,&)的方法
- svm
- Spring bean的作用域
- android中RecyclerView的简单使用(三)——瀑布流