Angular 1.6中ng-options移除自定义默认选项问题咨询

你遇到的这个问题是AngularJS 1.6对ng-options与模型值的匹配逻辑做了更严格处理导致的——当ng-model的初始值不在ng-options提供的选项集合中时，框架会自动生成一个value="?"的空选项，甚至会覆盖你手动添加的默认选项，这和1.5版本的宽松处理逻辑不同。

下面给你两个可行的解决方案：

方案一：将默认选项整合到选项数组中 #

最稳妥的方式是把「Select」这个默认选项直接加入到vm.fooOptions数组里，让vm.fooModel的初始值"none"能和选项集合中的值匹配，这样Angular就不会生成多余的空选项了。

修改控制器代码：

// 在原选项数组开头添加默认选项
vm.fooOptions = [
  {id: "none", name: "Select"},
  // 原来的业务选项
  {id: 1, name: "选项1"},
  {id: 2, name: "选项2"},
  // ...其他业务选项
];
vm.fooModel = "none"; // 初始值保持不变

然后简化HTML中的select标签，去掉手动添加的<option>：

<select ng-model="vm.fooModel" ng-options="item.id as item.name for item in vm.fooOptions">
</select>

方案二：给手动添加的选项设置ng-value #

如果你不想修改原有的选项数组，可以给手动添加的默认选项加上ng-value属性（1.6版本开始，Angular对原生value属性的匹配逻辑做了调整，必须用ng-value才能正确绑定模型值）。

修改后的HTML代码：

<select ng-model="vm.fooModel" ng-options="item.id as item.name for item in vm.fooOptions">
  <option ng-value="none">Select</option>
</select>

这样vm.fooModel的初始值"none"就能和这个选项正确匹配，框架就不会再生成那个空的value="?"选项了。

内容的提问来源于stack exchange，提问作者Pranay Dutta