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

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

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

但是：ぁzxswい

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

Answer 1

这里简单使用ng-options和ng-models来创建角度js中的选择框。

http://jsfiddle.net/ndLtLmrv/

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;
});

Answer 2

经过几个小时的搜索和调试（因为我的实际代码更大，我尝试了很多不同的东西）我终于找到了解决方案！实际上这很简单。我所要做的就是删除

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

元素中的所有空格。

新HTML：

option

这将给出预期的输出。

我从一开始就没有这样写的原因是我使用的是HAML，它自动添加了新的行和缩进。我通过向

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

添加<来解决这个问题（参见%option）。

我仍然不明白为什么会发生这种情况，因为我有类似的HAML whitespace removals工作得很好，即使他们在select内有空白。现在我至少得到了一个解决方案。

编辑：

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

因此，我在这里提出的解决方案只有在value的内容与其option相同时才有效。通过手动添加value，问题得以解决。

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

value