详解使用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];
});
这样，问题真的解决了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Angular CLI在Angular项目中如何使用scss详解
angular-cli自身支持Scss预处理器，Scss比css更加方便灵活，而且层次清晰，代码整洁。下面这篇文章主要给大家介绍了关于Angular CLI在Angular项目中如何使用scss的相关资料，需要的朋友可以参考下。2018-04-04
AngularJs Understanding Angular Templates
本文主要介绍AngularJs Understanding Angular Templates的资料，这里整理了详细的资料及简单示例代码，有兴趣的小伙伴的参考下2016-09-09
本篇文章主要介绍了Angular实现双向折叠列表组件的示例代码，分为左右两组，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
今天小编就为大家分享一篇angular 未登录状态拦截路由跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
今天小编就为大家分享一篇在angularJs中进行数据遍历的2种方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了详解Angular操作cookies方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了使用Angular-CLI构建NPM包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了AngularJS控制器的使用方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了Angular 多模块项目构建过程，本文大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论