angularjs 1.7 select 下拉菜单显示额外的选项值

Question

我正在尝试将我的应用程序中的 angularjs 从 1.5 迁移到 1.7。

我的模型数据如下：

$scope.colors = [
  {name:'black', shade:'dark'},
  {name:'yellow', shade:'light'}
];

$scope.myColor = '';

html:

 <label>Color :
 <select ng-model="myColor"
        ng-options="color.name for color in colors">
     <option value="">-- choose color --</option>
  </select>

由于 $scope.myColor 是一个空字符串，angular 在下拉列表中呈现一个额外的 <option value="?"></option> ，如下所示。

<select ng-model="myColor" ng-options="color.name for color in colors" class="ng-pristine ng-untouched ng-valid ng-empty">
   <option value="?" selected="selected"></option>
   <option value="">--choose color --</option>
   <option label="black" value="object:3">black</option>
   <option label="yellow" value="object:4">yellow</option>
</select>

有什么方法可以避免在 $scope.myColor 为空值时显示 <option value="?"></option> 并将其默认为 <option value="">--choose color --</option> 吗？

它在 angular 1.5 中按预期工作。

这里是 plunker: https://plnkr.co/edit/g0rVjBpM2qLrGuweP19E?p=preview

edit：@FDavidov、@Houssein、@Aleksey 建议我在下面的答案中使用 $scope.myColor = null。谢谢你。但这是我的企业应用程序代码库的重大变化。我试图找出是否有任何其他方法可以通过更改 html.

来实现相同的目的

Answer 1

您应该将 $scope.myColor 设置为 null 而不是 ""。

Answer 2

维奈,

将一个空字符串（即 ''）分配给 $scope.myColor 就是给它一个实际值。只需删除语句 $scope.myColor = ''; 或将 '' 替换为 null.

angularjs 1.7 select 下拉菜单显示额外的选项值

angularjs 1.7 select dropdown is showing an extra option value

angularjs

ng-options

angularjs-1.7