当前位置:首页 > 日记 > 正文

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

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

这两天我用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];         }); 

这样,问题真的解决了。 

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

相关文章

javascript实现二叉树遍历的代码

javascript实现二叉树遍历的代码

二叉树遍历,代码,电脑软件,javascript,前言:紧接着上篇 二叉树的javascript实现 ,来说一下二叉树的遍历。本次一本正经的胡说八道,以以下这个二叉树为例子进行遍历:接着是要引入二叉树实现的代码:function Node(data, left, right) { this.data…

ps怎么设计一款独特的彩色炫光字体

ps怎么设计一款独特的彩色炫光字体

字体,独特,彩色,电脑软件,ps,今天我们来看看使用PS制作一组彩色炫光字体效果的文字的教程,很简单,图文如下。软件名称:Adobe PhotoShop7.0 简体中文版软件大小:154MB更新时间:2014-09-02好的,开始我们的教程1、新建900X500白色画布,输入文字(最好选…

怎么运用WPS来设计一个二维码

怎么运用WPS来设计一个二维码

二维码,电脑软件,WPS,  使用WPS文字制作属于自己的二维码,二维码的使用是越来越普遍,我们可以通过扫面二维码来进行支付,使用起来非常方便。以下是小编为您带来的关于WPS设计一个二维码,希望对您有所帮助。WPS设计一个二维码1、打开WPS文字这…

微信小程序 scroll-view隐藏滚动条

微信小程序 scroll-view隐藏滚动条

滚动条,详解,程序,电脑软件,微信小,一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法:scroll-view.wxml:scroll-view.wxssscroll-view.js 最终…

PS导航器怎么快速定位的位置?

PS导航器怎么快速定位的位置?

定位,位置,导航,快速,电脑软件,PS窗口只显示了该图片的一部分图像,想要快速找到图片,就可以使用ps中的导航器快速的找到我们所需要的图像位置,下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更…

PS怎么给自然的合成云彩?

PS怎么给自然的合成云彩?

云彩,自然,电脑软件,PS,拍摄时,经常拍不到云彩,这就需要我们手动加入了。风景图片是我自己拍摄的,云彩是在网上截图的。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开ps,打开图片,按ctrl+j,复制图层…

Excel2013中如何计算方差和均方差

Excel2013中如何计算方差和均方差

方差,计算,方法,电脑软件,strong,  Excel2013中如何计算方差和均方差?方差、均方差,可能现在回想起来都有点陌生。但是,我们在初中数学里面就有所接触,方差可以反映数据的偏移程度,多用于零件测绘行业,在Excel表格中,有时需要计算出方差,下面小…

怎么在WPS表格中使用if函数完成分

怎么在WPS表格中使用if函数完成分

函数,评级,步骤,表格,分数,  用if函数可以不仅可以对学生的考试成绩进行评级,还可以对很多数字数据来进行评级,比如工人的工资,天气指数等。下面小编教你怎么在WPS表格中使用if函数完成分数评级。WPS表格中使用if函数完成分数评级的步骤新建…

angular $watch 一个变量的变化 |

angular $watch 一个变量的变化 |

变量,实例,电脑软件,angular,watch,废话不多说,直接上代码$scope.$watch('custArea', function(newValue, oldValue) { angular.forEach(newValue, function(item, key) { if($scope.custArea.indexOf("000000") > -1){ // $sc…

PS合成美女凌空接花瓶场景

PS合成美女凌空接花瓶场景

花瓶,场景,美女,电脑软件,PS,效果图合成并不难,不过前期准备要非常充分,尤其是人物素材部分,要能把动作和神韵都融入到画面中,这样出来的效果才更自然。最终效果所使用的素材:一、构图 12 3 4 阅读全文 1 23 4 阅读全文二、铺光 1 2 34 阅读…

vue-resource拦截器设置头信息的实

vue-resource拦截器设置头信息的实

设置,拦截器,实例,电脑软件,vue,使用vue-resource,设置头信息:Vue.http.interceptors.push((request, next) => { request.headers.set('Authorization', token) console.log(request.headers) next(response => { console.log(response.s…