如何使用 AngularJS 设置选择的默认选项？答案

【问题标题】：How do I set the default option for select with AngularJS?如何使用 AngularJS 设置选择的默认选项？
【发布时间】：2016-11-03 15:29:47
【问题描述】：

我一直在努力尝试为 angularJS 设置默认的预选选项，但由于某种原因我不能。这是link to the relevant Plunkr。

以下是相关代码：

<select 
      ng-model="selectedOption" 
      ng-options="option.value as option.name for option in options">
    </select>

我尝试了 ng-init 和许多不同的方法；我不知道如何使顶部选项成为预选的选项。

【问题讨论】：

How to have a default option in select box - Angular.js 的重复项？您提到您已经尝试了ng-init 很多方法-您是否以该答案中使用的特定方式尝试过它？
建议关闭中的答案，因为重复将起作用，但我不建议使用它，因为这不是 ng-init 的设计目的。

标签： javascript angularjs

【解决方案1】：

linked 答案建议使用ng-init。我会在控制器或指令的link 函数中将默认选项分配给selectedOption：

$scope.selectedOption = options[0]

我认为不需要为这个简单的任务使用另一个指令。

【讨论】：

这行得通。我正在使用 AJAX 调用来填充并认为它会更复杂。在相关说明中，我现在无法在 ng-include 模板中设置选择。似乎复制粘贴 html 会导致 select 语句工作正常，但只是通过 ng-include 导入它就搞砸了。
@iamsampsan，请使用支持代码编辑您的问题
@iamsampsan，我可以添加什么来使我的答案可以接受？

【解决方案2】：

如果您想要设置options 中预定义的选项之一，在您的ng-init 中执行类似this $scope.selectedOption = <value> 的操作，其中<value> 是您希望默认标记为选中的对象的值属性。例如1，如果您在options 中的第一个对象是{value: 1, name: "Option Number 1}。见以下代码：

$scope.options = [{value:1, name: "Option 1"}, {value:2, name: "Options 2"}];

$scope.selectedOption = 1;

另一方面，如果您只想显示一个预定义的选项，指示用户选择一个选项（而不是您的options 中的一个选项）... 这是一种非常简单（但有效的实现方式）。见以下代码：

<select
    ng-model="selectedOption"
    ng-options="option.value as option.name for option in options">
    <option value="">--Default--</option>
</select>

【讨论】：

【解决方案3】：

只需更新元素的模型，即selectedOption='yourDefaultValue'

您使用的是什么版本的 Angular？如果是最新的，那么你可以使用下面的代码::

    <select 
      ng-model="selectedOption" [ng-value]='yourDefaultValue'`
      ng-options="option.value as option.name for option in options">
    </select>

【讨论】：

【解决方案4】：

更新 plunkr 的链接：http://plnkr.co/edit/SkS0NqyXpnMcddu80anf?p=preview

如angular doc中所述，应避免更新函数中移动的模型代码以及select as和track by

Be careful when using select as and track by in the same expression.

【讨论】：