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

这样，问题真的解决了。

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

# ng # options # 默认值 # options设置默认值 # angularjs # angularjs select 赋值 ng-options配置方法 # AngularJS基础 ng-model-options 指令简单示例 # Angular中ng-options下拉数据默认值的设定方法 # AngularJS中ng-options实现下拉列表的数据绑定方法 # angular指令笔记ng-options的使用方法 # AngularJS动态绑定ng-options的ng-model实例代码 # AngularJS学习笔记之ng-options指令 # angularJs中ng-model-options设置数据同步的方法 # 遇到过 # 要写 # 的是 # 后端 # 解决了 # 忘记了 # 在这个 # 第一个 # 上了 # 我又 # 这个问题 # 没办法 # 我用 # 用了 # 弹出 # 想了 # 做一个 # 我将 # 请选择 # 用过

返回目录在线咨询

上一篇：如何在不点击按钮的情况下将复选框的值放入会话变量中？
下一篇：Python与NLTK：高效提取文本名词的实用指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求