详解使用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];
});
这样，问题真的解决了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
angularjs1.X 重构controller 的方法小结
这篇文章主要介绍了angularjs1.X 重构controller 的方法小结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了angularjs学习笔记之简单介绍的相关资料,需要的朋友可以参考下2015-09-09
Angular项目如何使用拦截器 httpClient 请求响应处理
这篇文章主要介绍了Angular项目简单使用拦截器httpClient请求响应处理,目前我的Angular版本是Angular 17.3,版本中实现请求和响应的拦截处理了,这种机制非常适合添加如身份验证头、错误统一处理、日志记录等功能,需要的朋友可以参考下2024-06-06
angular4中*ngFor不能对返回来的对象进行循环的解决方法
今天小编就为大家分享一篇angular4中*ngFor不能对返回来的对象进行循环的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
详解Angularjs 如何自定义Img的ng-load 事件
本篇文章主要介绍了详解Angularjs 如何自定义Img的ng-load 事件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了详解Angular如何正确的操作DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的2015-12-12
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
最近做项目时遇到了需要用到多选按钮选中触发事件的功能，小编试着手写一个指令，具体实现代码大家参考下本文吧2017-07-07
之前因为项目的需求，第一次系统的使用了angular这一优秀的js框架，其所拥有的许多优秀特性极大的方便了项目的开发，然而在开发中也遇到过不少的问题，趁着最近有时间给大家总结一下，这篇文章将会介绍使用angularjs1结合百度的图表插件echart作为例子用以演示。2016-10-10
最新评论