AngularJS进阶(四十二)ng-options渲染的第一项为空的解决办法

现象

  我们在使用ng-options时，如果首次使用，可能会在渲染完成后发现下拉列表的第一项为空，并且我们在选择一项之后，为空的第一项已经消失了，这样用户体验上来说很不好。

原因

  原因就在于：我们使用ng-options的时候，是配合模型指令ng-model一起使用的，从而我们就可以知道，渲染生成的第一项为空原因肯定和ng-model的初始值有关系。

解决办法

• 1.可以在控制器中给ng-model的初始值设置为下拉选项中的某个值或对象；
• 2.可以给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;
  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

html

<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>
  

 

  
1
  
2
  
3
  
4
  
5
 

效果

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/77923241