angularjs - 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>

由于是一个空字符串，因此 angular在下拉列表中$scope.myColor呈现了一个额外的内容，如下所示。<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值？

它在 angular 1.5 下按预期工作。

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

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

标签： angularjsng-optionsangularjs-1.7

Answer 1

Vinay,

Assigning an empty string (i.e. '') to $scope.myColor is giving to it an actual value. Simply either remove the statement $scope.myColor = ''; or replace '' by a null.