Javascript 如何对 AngularJS 生成的选择列表进行预选？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14297560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a preselection for a select list generated by AngularJS?
提问by randomguy
<select ng-model="team.captain" ng-options="player.name for player in team.players"></select>
This correctly creates a select list to choose the team captain. However, by default a blank option is selected. How can we preselect the first player from the list instead?
这正确地创建了一个选择列表来选择团队队长。但是，默认情况下会选择一个空白选项。我们如何从列表中预选第一个玩家？
<select ng-model="team.captain" ng-options="player.name for player in team.players" class="ng-pristine ng-valid">
<option value="0">John</option>
<option value="1">Bobby</option>
</select>
I tried adding ng-init="team.captain='0'"but that didn't help.
我尝试添加，ng-init="team.captain='0'"但这没有帮助。
UpdateApparently this happens because
更新显然这是因为
a value referenced by ng-model doesn't exist in a set of options passed to ng-options.
ng-model 引用的值在传递给 ng-options 的一组选项中不存在。
Source: Why does AngularJS include an empty option in select?
However, the question still remains why using ng-init doesn't work?
但是，问题仍然存在为什么使用 ng-init 不起作用？
<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>
回答by randomguy
Here's what worked:
这是有效的：
<select ng-init="team.captain=team.players[0]"
ng-model="team.captain"
ng-options="player.name for player in team.players"></select>
And what didn't work:
什么不起作用：
ng-init="team.captain='0'"
ng-init="team.captain='John'"
My guess is that Angular goes beyond simple comparison of values or labels. It probably compares object references.
我的猜测是 Angular 不仅仅是值或标签的简单比较。它可能比较对象引用。
回答by Gerald
Here's an alternate method for initializing a drop down menu using AngularJS.
这是使用 AngularJS 初始化下拉菜单的另一种方法。
(working example on JS Fiddle: http://jsfiddle.net/galeroy/100ho18L/1/)
（JS Fiddle 的工作示例：http: //jsfiddle.net/galeroy/100ho18L/1/）
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="" ng-controller="myController">
<select
ng-model="carSelection"
ng-options = "x.make for x in cars">
</select>
<script>
function myController($scope) {
$scope.cars = [
{"make": "Nissan", "model": "Sentra"},
{"make": "Honda", "model": "Prelude"},
{"make": "Toyota", "model": "Prius"}
]
$scope.carSelection = $scope.cars[1]; // this line initializes the drop down menu
}
</script>
</body>
回答by Mark Rajcok
As @camus already mentioned in a comment, you need to set the model to a valid "label" value (or reference), not an index value. This is a bit odd since you can see an index value being used in the HTML.
正如@camus 在评论中已经提到的，您需要将模型设置为有效的“标签”值（或引用），而不是索引值。这有点奇怪，因为您可以看到 HTML 中使用的索引值。
Angular sets the value attributes in the HTML as follows:
Angular 在 HTML 中设置 value 属性如下：
- when using array as datasource, it will be the index of array element in each iteration;
- when using object as datasource, it will be the property name in each iteration.
- 当使用数组作为数据源时，它将是每次迭代中数组元素的索引；
- 当使用对象作为数据源时，它将是每次迭代中的属性名称。
When an item is selected, Angular looks up the correct entry in the array/object based on the index or property name.
当一个项目被选中时，Angular 会根据索引或属性名称在数组/对象中查找正确的条目。
回答by Arpit Aggarwal
What about ng-selected, as seen in this jsfiddle:
ng-selected怎么样，如在这个 jsfiddle 中看到的 ：
<select ng-model="val">
<option ng-repeat="opt in options" ng-selected="$first">
{{ opt }}
</option>
</select>
回答by Amardeep Kohli
I achieved this using ng-modeland ng-options.Basically your model and ng-options should be in sync.
我使用ng-model和ng-options实现了这一点。基本上你的模型和 ng-options 应该是同步的。
When my model (projIndustry in this case) was initialized to some number then I had to use ind.IDin ng-options.(ID comparison).
When my model was initialized to object ,then I had to use ind(object) in ng-options.(Object comparison)
当我的模型（在本例中为 projIndustry）被初始化为某个数字时，我不得不在 ng-options.（ID 比较）中使用ind.ID。
当我的模型被初始化为 object 时，我不得不在 ng-options 中使用ind(object)。(对象比较)
<select data-ng-options="ind.ID as ind.Display_Text for ind in arrIndustries"
data-ng-model="projIndustry" ng-change="onIndChange()" />
