AngularJs和<select>:删除默认选定的选项

Question

我希望以下代码呈现下拉列表,默认情况下选择第三个选项.但是,当我使用angularjs绑定选择时,默认选择消失.任何想法？

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

这是一个有效的例子:http://jsfiddle.net/TXPJZ/134/

谢谢!

Answer 1

修复实现的最简单方法是使用ng-init.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

在FIDDLE上尝试一下.

Answer 2

将select绑定到模型时,Angular会覆盖"selected"属性.如果检查渲染的DOM,您会发现添加了一个新项:

<option value="? undefined:undefined ?"></option>

为了自动选择第三个选项,您需要在范围内预先填充模型.有几种方法可以做到这一点,包括将select包装在控制器中:

<div ng-controller="MyCtrl">
    <select id="myselection" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
<div>Selected Colors: {{selectedColors }}</div>

然后在控制器中定义该模型.

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);

这是一个运行的例子.

http://jsfiddle.net/93926/

或者,您可以使用ng-init初始化它,例如在此示例中:

<div ng-init="selectedColors=3">

http://jsfiddle.net/9JxqA/1/

编辑:删除了第一个示例中的选定属性,不再需要它.