使用angularjs的ng-options时如何设置默认值(初始值)
来源:互联网 发布:成都数据恢复价格表 编辑:程序博客网 时间:2024/05/17 04:57
这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己。
1.场景:
就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的。
2.实现:
a.html:
<select ng-model="myselect" ng-options="o for o in options"></select>b.js:
var url = 'xxxxxx';//该url只是举例,具体的代码要写可用的请求地址。 $http.post(url). success(functoin(data){ $sope.options=data; //赋值给ng-options });我当时以为,html写好,动态数据传递给ng-options,这样下拉菜单就可以用了。运行之后也大致正常,只是下拉菜单是空白的,点击之后出现后台传递的数据,就多了第一
个的空白项,点击弹出所有的下拉选项,选择要选的选项之后,空白项就又消失了。
查看浏览器中加载好的html发现<select>标签中多了一个非后台传递的option:
<select ng-model="myselect" ng-options="o for o in options"> <option value="?"></option> <option value="0">--请选择--</option> . . </select>有点讽刺的是,我去年开发的一个页面中的下拉菜单就遇到过这个问题,当时费了老大功夫才解决,但是怎么解决的竟然忘记了,,没办法,我又试了一通ng-init都不行,依然出现空白的选择首先展示出来。
想了一下这个value="?" 有时候是“undefind”应该是ng-model="myselect"的初始值,当后端数据传递过来赋值给options之后(即:
$sope.options=data;),angularjs一定是没有覆盖select的原始option,即$scope.myselect=undefind,而是在这个option基础上加上了后端传递过来的data数据,从而导致页面上下拉菜单中多出一个空白的下拉选项。
按照这个思路,又查了一下stackoverflow中的一些说法,我将js改成从为options赋值时就初始化myselect:
var url = 'xxxxxx';//该url只是举例,具体的代码要写可用的请求地址。 $http.post(url). success(functoin(data){ $scope.options=data; //赋值给ng-options $scope.myselect = $scope.options[0]; });这样,问题真的解决了。
0 0
- 使用angularjs的ng-options时如何设置默认值(初始值)
- 使用angularjs的ng-options时如何设置默认值(初始值)
- AngularJs ng-options 无法设置value的问题
- AngularJS 的select 控件的ng-options的使用示例
- AngularJS中ng-options的用法
- angularjs中ng-options的用法
- Angularjs ng-options用法
- AngularJs ng-options
- AngularJS动态绑定ng-options的ng-model
- Angularjs中ng-select和ng-options的用法详解
- Angularjs设置ng-repeat里面循环出来的select的默认值
- angularJs中ng-model-options设置数据同步
- AngularJS使用 ng-options 实现传值给后台controller
- ng-options怎么设置option的value
- 【AngularJS】ng-model-options指令
- AngularJS 之ng-options指令
- 类似angularjs的ng-options解析规则的解析函数
- [Angularjs]ng-select和ng-options
- 如何美化odoo的登录界面?
- ajax+FormData实现图片上传
- network_tcp三次握手
- Scala函数式编程进阶
- 所谓更牛,就是换个罪受!——《时间的朋友2016跨年演讲》深入笔记
- 使用angularjs的ng-options时如何设置默认值(初始值)
- [腾讯校招] 微信红包
- Android 抢红包
- Java进阶面试题
- tomcat6 启动编码配置
- FreeRTOS FreeRTOSConfig.h内容定义
- SecureCRT通过堡垒机自动登录服务器的方法
- network_tcp报文详解
- Java中的并发工具CountDownLatch、CyclicBarrier、Semapphore使用详解