Angular JS - Select 框顶部有一个空白选项

Question

我遇到的问题是 select 在顶部有一个空白 option，即使模型的值对应于第一个选项的值。

JavaScript:

var MyApp, Day;

Day = (function() {
  function Day() {}
  Day.MON = 'Mon';
  Day.TUE = 'Tue';
  Day.WED = 'Wed';
  return Day;
})();

MyApp = angular.module('MyApp1', []);
MyApp.controller('MyController', function($scope) {
  $scope.myDay = Day.MON;
  $scope.Day = Day;
});

HTML:

<div ng-app="MyApp1">
  <div ng-controller="MyController">
    Current value: {{myDay}}
    <select ng-model="myDay">
      <option ng-value="Day.MON">
        {{Day.MON}}
      </option>
      <option ng-value="Day.TUE">
        {{Day.TUE}}
      </option>
      <option ng-value="Day.WED">
        {{Day.WED}}
      </option>
    </select>
  </div>
</div>

输出HTML:

...
Current value: Mon
<select class="ng-pristine ng-valid" ng-model="myDay"><option value="? string:Mon ?"></option>
  <option class="ng-binding" value="Mon" ng-value="Day.MON">
    Mon
  </option>
  <option class="ng-binding" value="Tue" ng-value="Day.TUE">
    Tue
  </option>
  <option class="ng-binding" value="Wed" ng-value="Day.WED">
    Wed
  </option>
</select>
...

请注意，模型具有正确的值，并且直接在 select 元素内添加了一个空白 option。

演示：http://jsfiddle.net/ndLtLmrv/

Whosebug 上有很多类似的问题，但大多数似乎是由未初始化的模型引起的。

Answer 1

经过几个小时的寻找答案和调试（因为我的实际代码要大得多，所以我尝试了很多不同的东西）我终于找到了解决方案！其实很简单。我所要做的就是删除 option 元素中的所有空格。

新 HTML:

...
<select ng-model="myDay">
  <option ng-value="Day.MON">{{Day.MON}}</option>
  <option ng-value="Day.TUE">{{Day.TUE}}</option>
  <option ng-value="Day.WED">{{Day.WED}}</option>
</select>
...

这将给出预期的输出。

之所以一开始没有这样写，是因为我用的是HAML，自动添加新行和缩进。我通过在 %option 中添加 < 解决了这个问题（参见 HAML whitespace removal）。

我仍然不明白为什么会发生这种情况，因为我有类似的 selects，即使它们在 option 中有空格，它们也能正常工作。现在我至少有了一个解决方案。

编辑：

现在我想我知道为什么会出现这个问题了。似乎 angular 在评估 ng-value 之前将 ng-model 中的值与选项 values 进行比较。由于选项没有任何 value，因此将模型与选项的内容进行比较。这解释了为什么它在第一种情况下不起作用（空格太多），而当我删除空格时它起作用了。

因此，我在这里提出的解决方案只有在 option 的内容与其 value 相同的情况下才有效。通过手动添加一个value问题就解决了。

这应该是对初始问题更正确的解决方案：

...
<select ng-model="myDay">
  <option ng-value="Day.MON" value="{{Day.MON}}">
    Mon
  </option>
  <option ng-value="Day.TUE" value="{{Day.TUE}}">
    Tue
  </option>
  <option ng-value="Day.WED" value="{{Day.WED}}">
    Wed
  </option>
</select>
...

Answer 2

这里是简单使用ng-options和ng-models在angular js中创建select框。

var MyApp, Day;

Day = [{label:'Mon',value:'Mon'},{label:'Tue',value:'Tue'},{label:'Wed',value:'Wed'}];

MyApp = angular.module('MyApp1',[]);
MyApp.controller('MyController', function($scope) {
    $scope.myDay = Day[1];
    $scope.Day = Day;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        Current value: {{myDay.value}}
        <select ng-model="myDay"
            ng-options="opt as opt.label for opt in Day">
        </select>        
    </div>
</div>

Angular JS - Select 框顶部有一个空白选项

Angular JS - Select box has a blank option at top

html-select

angularjs

angular-ngmodel