AnguarJS Select框 出现空白选项解决方案

AnguarJS Select框 ng-repeat ng-options

AnguarJS Select框 出现空白选项解决方案

搜索AngularJS Select框出现空白选项解决方案，有很多人遇到这个问题，答案五花八门，但都不清晰，现在总结如下：

Why

当使用ng-model时，如果绑定的值的形式与options（options总是返回string形式）不匹配，或者绑定的值不能匹配任何一个option，此时angularJS 会将其设为空值，所以出现了空白。一句话总结原因：ng-model 和 option 不匹配。

How

AngularJS官方文档提供了三种解决方法：

1. 使用ng-options
   一般来说，ng-options基本上可以完成ng-repeat的大部分任务

<select ng-model="assignment.assignee" ng-options="u.username for u in allUserTest.allUser">
       <option value="">{{assignment.assignee.username}}</option>
 </select>

ng-options里内容设置很多种，功能很丰富，比如group by等等。这里u.username for u 返回的是u这个对象，实际上显示在下拉框里的只是对象里的username属性。
**注意，当需要使用两层循环时，ng-options貌似还不能替代ng-repeat，等高人指点吧

2. 用ng-value 代替option里的value

<select name="ngvalueselect" ng-model="data.model" multiple>
      <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>
</select>

3. 转换model形式

<select ng-model="model.id" convert-to-number>
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

以上方法来自于angularJS 官方文档：AngularJS API