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

效果 AngularJS进阶(四十二)ng-options渲染的第一项为空的解决办法
文章图片

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


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


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

    推荐阅读