angularjs 1.7选择下拉列表显示额外的选项值

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>

当<option value="?"></option>有空值时，有没有办法避免显示<option value="">--choose color --</option>并将其默认为$scope.myColor？

它按预期工作，角度为1.5。

这是羽毛球：https://plnkr.co/edit/g0rVjBpM2qLrGuweP19E?p=preview

编辑：@FDavidov，@ Houssein，@ Aleksey建议我在下面的答案中使用$scope.myColor = null。谢谢你。但这是我的企业应用程序代码库中的一个重大变化。我试图找出是否有任何其他方法来实现相同的html更改。

Answer 1

你应该将$ scope.myColor设置为null而不是“”。

Answer 2

维奈，

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