使用Angularjs在选择下拉列表中设置默认值

Question

我有一个目标如下。我必须将其显示为下拉列表：

var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]

在我的控制器中，我有一个携带值的变量。该值决定了在下拉列表中默认选择阵列中上述三项中的哪一项：

 $scope.object.setDefault = 600;

当我创建下拉表单项时，如下所示：

<select ng-model="object.setDefault" ng-options="r.name for r in list">                 

我面临两个问题：

>

<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>

而不是

<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>

默认情况下，即使我有ng model=“object.setDefault”

Answer 1

鉴于

<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>

JS：

在侧控制器

 $scope.boxModel = 600;

Answer 2

使用ng选项填充选择列表时，它使用整个对象作为选定值，而不仅仅是在选择列表中看到的单个值。所以在你的情况下，你需要

$scope.object.setDefault = {
    id:600,
    name:"def"
};

或者

$scope.object.setDefault = $scope.selectItems[1];

我还建议在模板中输出$scope.object.setDefault的值，以了解我所说的选择。

<pre>{{object.setDefault}}</pre>

Answer 3

问题一：

生成的HTML是正常的。显然，能够使用任何类型的对象作为选择的值是Angular的一个特性。Angular在HTML选项值和ng模型中的值之间进行映射。还可以看到Umur在这个问题上的评论：如何在AngularJS的ng选项中设置value属性？

问题二：

确保您正在使用以下ng选项：

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

并将其放入控制器中以选择默认值：

object.item = 4