AngularJS中ng-options渲染的第一项为空问题分析及解决方案

一、问题描述

在使用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>

五、延伸阅读

HTML:让表单、文本框只读，不可编辑的方法
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。

方法1: onfocus=this.blur()
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly
<input type="text" name="input1" value="中国" readonly>

方法3: disabled
<input type="text" name="input1" value="中国" disabled>

很简单，但有时候很有用！