详解使用angularjs的ng-options时如何设置默认值(初始值)


Posted in Javascript onJuly 18, 2017

这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己。

1.场景:

就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的。

详解使用angularjs的ng-options时如何设置默认值(初始值)

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,这样下拉菜单就可以用了。运行之后也大致正常,只是下拉菜单是空白的,点击之后出现后台传递的数据,就多了第一个的空白项,点击弹出所有的下拉选项,选择要选的选项之后,空白项就又消失了。

详解使用angularjs的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];   
      });

这样,问题真的解决了。 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 #Javascript
JS实现点击Radio动态更新table数据
Jul 18 #Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 #Javascript
ES6学习之变量的两种命名方法示例
Jul 18 #Javascript
You might like
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
详解Python3 基本数据类型
2019/04/19 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Django logging配置及使用详解
2019/07/23 Python
python实现邮件发送功能
2019/08/10 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
Python绘制分类图的方法
2021/04/20 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python