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

问题1：

您获得的生成的HTML是正常的。显然，Angular的一个特性是能够使用任何类型的对象作为选择的值。 Angular执行HTML选项值与ng-model中的值之间的映射。另请参阅Umur在此问题中的评论：How do I set the value property in AngularJS' ng-options?

问题2：

确保您使用以下ng-options：

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

Answer 5

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

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

Answer 6

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

这会得到你想要的结果Dude :)干杯

Answer 7

有些场景，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"

Answer 8

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

Answer 9

我们应该使用名称值对绑定值进入dropdown.see 代码了解更多详情

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>

Answer 10

我可以用html帮助你：

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

而不是

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

将abc设置为默认值。

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

10 个答案: