使用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">                 

我面临两个问题:

1. 该列表生成为

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

2. 默认情况下,没有选项被选中,即使我有 ng-model="object.setDefault"

Answer 1

问题1:

您获得的生成的HTML是正常的.显然,Angular的一个特性是能够使用任何类型的对象作为选择的值.Angular执行HTML选项值与ng-model中的值之间的映射.另请参阅Umur在此问题中的评论:如何在AngularJS的ng-options中设置value属性？

问题2:

确保您使用以下ng选项:

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

并将其放入您的控制器中以选择默认值:

object.item = 4

Answer 2

使用ng-options填充选择列表时,它使用整个对象作为选定值,而不仅仅是您在选择列表中看到的单个值.所以在你的情况下,你需要设置

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

要么

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

我还建议您只在模板中输出$ scope.object.setDefault的值,看看我在谈论选择的内容.

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

Answer 3

在视图中

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

JS:

在侧控制器中

 $scope.boxModel = 600;

Answer 4

您可以使用以下代码(跟踪),

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>