Question

jsFiddle：http://jsfiddle.net/shandylion/2r3z1uma/

我需要显示一个对象列表作为下拉列表，其中更改下拉列表会更改列表中的相应元素。理想情况下，每个下拉列表都应该默认为该元素。

因此，请使用以下数据：

$scope.allPeople = [{"name":"Ann", "Age":10},
                    {"name":"Barb", "Age":20},
                    {"name":"Carl", "Age":30}];
$scope.selectedPeople = [{"name":"Ann", "Age":10},
                         {"name":"Carl", "Age":30}];

以及以下HTML：

<div ng-repeat="selectedPerson in selectedPeople">
  <select ng-options="person as person.name for person in allPeople"
         ng-model="selectedPeople[$index]"
         name="select-{{$index}}" id="select-{{$index}}"></select>
</div>

应该有两个下拉列表，第一个默认为＆＃34; Ann＆＃34;第二个是＆＃34; Carl＆＃34;。

我已尝试使用ng-selected，但这似乎只适用于<option>代码，而不是<select>内部。其他Stack Overflow帖子建议我们应始终使用ng-options而不是<option>使用ng-repeat，因此我不知道如何将其默认为适当的值。

Answer 1

这里是sample plunker，它有一个可行的解决方案以及下面描述的错误。

下拉列表的缺陷是，当您想要从选项列表中预选值时，所选模型应该是指向绑定列表中同一对象的引用。说你有：

var list = [{ id: 1, value: 'first'}];
var model = { id: 1, value: 'first' };
<select ng-options="item.value for item in list" ng-model="model"></select>

这将不预先选择下拉列表，因为list[0]和model不是同一个对象，尽管它们看起来很相似。如果您将ng-model设置为list[0]，则应该预先选择它。

Answer 2

由于您使用的是person.name for person in allPeople，因此所选选项会将person.name作为值返回。您将$scope.selectedPeople数组的值预设为对象，这与您的选择列表将返回的值不匹配，因此您的初始值未正确设置。如果您希望将person.name作为每个选项的值，则应将$scope.selectedPeople更改为：

$scope.selectedPeople = ["Ann", "Carl"];

另一方面，如果您想要返回person作为每个选项的值，请将ng-options表达式更改为person as person.name for person in allPeople，这意味着您返回person并将其显示为person.name中每个person的{{1}}。

使用ng-options选择的默认值

2 个答案: