如何对 AngularJS 生成的选择列表进行预选? [英] How to make a preselection for a select list generated by AngularJS?

问题描述

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

我尝试添加 ng-init="team.captain='0'" 但这没有帮助.

I tried adding ng-init="team.captain='0'" but that didn't help.

更新 显然这是因为

ng-model 引用的值在传递给 ng-options 的一组选项中不存在.

a value referenced by ng-model doesn't exist in a set of options passed to ng-options.

来源:为什么 AngularJS 包含一个选择中的空选项?

然而，问题仍然存在，为什么使用 ng-init 不起作用?

However, the question still remains why using ng-init doesn't work?

<select ng-init="team.captain='0'" ng-model="team.captain" ng-options="player.name for player in team.players"></select>

推荐答案

这是有效的:

<select ng-init="team.captain=team.players[0]" 
        ng-model="team.captain" 
        ng-options="player.name for player in team.players"></select>

什么不起作用:

ng-init="team.captain='0'"
ng-init="team.captain='John'"

我的猜测是 Angular 不仅仅是值或标签的简单比较.它可能比较对象引用.

My guess is that Angular goes beyond simple comparison of values or labels. It probably compares object references.

这篇关于如何对 AngularJS 生成的选择列表进行预选?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！