升级到 Angular 1.6 中断 select 下拉菜单

Question

我有一个使用 Angular 1.5 构建的应用程序，其中以下代码工作正常：

      <div class="select-wrapper">

        <select ng-model="myModel"
          ng-options="thing as thing for (thing, otherThing) in sortedThings">

          <option value="">MAKE SELECTION</option>

        </select>

        <i class="fa fa-angle-down" title="Select Arrow"></i>

      </div>

但是，当我升级到 Angular 1.6 时，此代码不再显示 select 框中的默认选项（进行选择）。

为什么会发生这种情况以及如何解决？

编辑：我想看到的是，当我第一次加载页面时，下拉菜单应该 'MAKE SELECTION' 已经 selected。

Answer 1

将模型设置为默认选项时，使用值 undefined 很重要。将模型设置为空字符串 "" 将不起作用。

angular.module('defaultSelectValue', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     sortedThings: {
       a: 'fred',
       b: 'narf',
     },
     selectedOption: undefined //This sets the default value of the select in the ui
     };
  
    $scope.s2 = { 
       selectedOption: ""   //setting to empty string won't work
    }
 }]);

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="defaultSelectValue" ng-controller="ExampleController">
    <select
      ng-options="key as key for (key, value) in data.sortedThings"
      ng-model="data.selectedOption">
      <option value="">MAKE SELECTION</option>
    </select>
    <br>
    <tt>option = {{data.selectedOption}}</tt><br/>
    <hr>
      Empty string doesn't work<br>
    <select
          ng-options="key as key for (key, value) in data.sortedThings"
          ng-model="s2.selectedOption">
      <option value="">MAKE SELECTION</option>
    </select>
    <br>
    <tt>option = {{s2.selectedOption}}</tt>
</body>

升级到 Angular 1.6 中断 select 下拉菜单

Upgrade to Angular 1.6 breaks select dropdown

javascript

angularjs

ng-options

angular1.6