如何使用AngularJS设置select的默认选项?

时间:2016-11-03 15:29:48

标签: javascript angularjs

我一直在尝试为angularJS设置默认的预选选项,出于某些原因我不能这样做。这是link to the relevant Plunkr

以下是相关代码:

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

我尝试过ng-init和一些不同的方法;我无法确定如何将顶部选项作为预选选项。

4 个答案:

答案 0 :(得分:3)

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

$scope.selectedOption = options[0]

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

答案 1 :(得分:1)

如果你想要的是设置options中预先定义的选项之一, 在ng-init中执行this $scope.selectedOption = <value>之类的操作,其中<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>

答案 2 :(得分:0)

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

你使用的角度是多少? 如果是最新的,那么你可以使用下面的代码::

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

答案 3 :(得分:0)

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

angular doc

中所述,应该避免更新在函数中移动的模型代码以及track byBe careful when using select as and track by in the same expression.

userData