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。

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

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

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

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

修改

现在我想我知道问题发生的原因。在评估ng-model之前，似乎angular会将value中的值与选项ng-value进行比较。由于选项没有任何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来创建角度js中的选择框。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: