AngularJS ng-options渲染的第一项为空问题分析及解决方案
【摘要】 一、问题描述在使用ng-options时,如果首次使用,可能会在渲染完成后发现下拉列表的第一项为空,并且在选择一项之后,为空的第一项已经消失了,这样用户体验上来说很不好。 二、原因剖析使用ng-options的时候,是配合模型指令ng-model一起使用的,从而我们就可以知道,渲染生成的第一项为空原因肯定和ng-model的初始值有关系。 三、解决办法可以在控制器中给ng-model的初始...
一、问题描述
在使用ng-options
时,如果首次使用,可能会在渲染完成后发现下拉列表的第一项为空,并且在选择一项之后,为空的第一项已经消失了,这样用户体验上来说很不好。
二、原因剖析
使用ng-options
的时候,是配合模型指令ng-model
一起使用的,从而我们就可以知道,渲染生成的第一项为空原因肯定和ng-model
的初始值有关系。
三、解决办法
- 可以在控制器中给
ng-model
的初始值设置为下拉选项中的某个值或对象; - 可以给
select
默认增加一项类似“请选择”的选项。
四、示例
控制器
var instsData ={
"result":"0000",
"errtext":"",
"data":[
{"instName":"中国银行","instCode":"000996"},
{"instName":"中国西电","instCode":"601179"},
{"instName":"中国重汽","instCode":"000951"}
]};
var results = instsData.data;
$scope.inst = results[0];
$scope.insts = results;
<select id="selectInput" style="display:none"
ng-model="inst"
ng-options="inst.instCode as inst.instName for inst in insts" ng-change="doChange()">
<option value="">----请选择----</option>
</select>
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)