21

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

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"

4

10 回答 10

21

问题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
于 2014-01-03T10:35:40.710 回答
10

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

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

或者

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

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

<pre>{{object.setDefault}}</pre>
于 2013-07-23T15:55:56.990 回答
8

在视图中

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

JS：

在侧控制器

 $scope.boxModel = 600;
于 2014-04-04T05:50:46.190 回答
7

您可以使用以下代码（跟踪）来做到这一点，

<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
于 2015-02-02T10:02:57.520 回答
3 
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

This would get you desired result Dude :) Cheers

于 2016-02-18T12:03:22.680 回答
3

这是一个古老的问题，您可能已经得到了答案。

我的plnkr解释了我完成选择默认下拉值的方法。基本上，我有一个服务会返回下拉值[硬编码测试]。默认情况下我无法选择该值，几乎花了一天时间，最后发现我应该设置$scope.proofGroupId = "47";而不是$scope.proofGroupId = 47;在 script.js 文件中。这是我的错，我没有注意到我设置的是整数 47 而不是字符串“47”。我保留了plnkr，以防万一有人想看。希望这会对某人有所帮助。

于 2015-11-24T23:50:30.653 回答
2

在某些场景中，object.item 不会被加载或未定义。

使用ng-init

<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
于 2014-03-06T23:06:48.947 回答
2 
$scope.item = {
    "id": "3",
    "name": "ALL",
};

$scope.CategoryLst = [
    { id: '1', name: 'MD' },
    { id: '2', name: 'CRNA' },
    { id: '3', name: 'ALL' }];

<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
于 2015-01-22T14:14:22.870 回答
-3

我们应该在下拉列表中使用名称值对绑定值。有关更多详细信息，请参见代码

function myCtrl($scope) {
     $scope.statusTaskList = [
        { name: 'Open', value: '1' },
        { name: 'In Progress', value: '2' },
        { name: 'Complete', value: '3' },
        { name: 'Deleted', value: '4' },
    ];
    $scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open 
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>

于 2014-10-15T09:48:05.110 回答
-12

我可以帮你解决html：

<option value="">abc</option>

代替

<option value="4">abc</option>

将 abc 设置为默认值。

于 2013-08-22T13:44:36.637 回答