AngularJS进阶(四十二)ng-options渲染的第一项为空的解决办法
AngularJS进阶(四十二)ng-options渲染的第一项为空的解决办法
现象 【AngularJS进阶(四十二)ng-options渲染的第一项为空的解决办法】我们在使用ng-options时,如果首次使用,可能会在渲染完成后发现下拉列表的第一项为空,并且我们在选择一项之后,为空的第一项已经消失了,这样用户体验上来说很不好。
原因 原因就在于:我们使用ng-options的时候,是配合模型指令ng-model一起使用的,从而我们就可以知道,渲染生成的第一项为空原因肯定和ng-model的初始值有关系。
解决办法
- 1.可以在控制器中给ng-model的初始值设置为下拉选项中的某个值或对象;
- 2.可以给select默认增加一项类似“请选择”的选项。
var instsData =https://www.it610.com/article/{"result":"0000",
"errtext":"",
"data":[
{"instName":"中国银行","instCode":"000996"},
{"instName":"中国西电","instCode":"601179"},
{"instName":"中国重汽","instCode":"000951"}
]};
var results = instsData.data;
$scope.inst = results[0];
$scope.insts = results;
html
效果
文章图片
文章图片
文章图片
文章图片
推荐阅读
- 亲子日记第三百四十二篇|亲子日记第三百四十二篇 暴雨
- 推荐系统论文进阶|CTR预估 论文精读(十一)--Deep Interest Evolution Network(DIEN)
- 我的六合微生活(四十二)也说“体心胆”合练
- 普通人进阶的三个过程-很多人都知道,但却本末倒置
- 易效能进阶课程笔记29
- C语言进阶栈帧示例详解教程
- 14--Python|14--Python 面向对象进阶
- 参与直播阿福童财商进阶课――第二课广告大探秘
- C语言学习(bit)|16.C语言进阶——深度剖析数据在内存中的存储
- Python机器学习基础与进阶|Python机器学习--集成学习算法--XGBoost算法