Question

使用最新稳定的AngularJS（1.3.15），在已填充ng-options之后填充<select> 的ng-model，似乎未选择模型。

HTML：

<body ng-controller="MainCtrl"> Selected: {{selected}} <br/> <select ng-model="selected" ng-options="item as item for item in list"> <option value="">-- Select something --</option> </select> <span ng-show="loading">(loading...)</span> </body>

JavaScript的：

app.controller('MainCtrl', function($scope, $timeout) { $scope.selected = 'first'; $scope.list = []; $scope.loading = true; $timeout(function () { $scope.list = ["first","second","third"]; $scope.loading = false; }, 1000); });

Or Plunker with both.

如果使用list填充$timeout()来模拟延迟加载，则<option>元素会更新，但ng-model中的值未被选中（我预计要选择的值first。这是一个错误还是我做错了什么？

Answer 1

您应该使用ng-options="item for item in list track by $index"然后在ajax加载$scope.selected = first之后设置所选的值

  <body ng-controller="MainCtrl">
    Selected: {{selected}}
    <br/>
    <select ng-model="selected" ng-options="item for item in list track by $index">
    </select>
    <span ng-show="loading">(loading...)</span>
  </body>

注意

使用大写$ index将解决您的问题，但select is not compatible with select

Working Plunkr

Answer 2

Dimi Toulakis 和 pankajparkar 是对的，您需要在列表更改时设置所选项目。

但如果你问为什么：

这是故意的，如果在列表中的每次更改后，选择了第一个项目，那么这对用户来说就不全面了。

例如：我有一个列表[1,2,3,4]

让我说我（一个用户）选择2，然后ajax调用更新列表（现在是[1,2,3,4,5,6,7]），如果它改变了所选项目就会很奇怪。用户不会理解发生了什么，他会发送一个选择错误的表单。

在ng-model之后填充ng-options

2 个答案: