如何使用 ng-options 在下拉菜单中设置默认值？答案

【问题标题】：How to set default value in drop down using ng-options?如何使用 ng-options 在下拉菜单中设置默认值？
【发布时间】：2014-10-21 20:09:47
【问题描述】：

我在我的表单中使用了一个下拉框来列出项目。

这是html代码：

<tr>
  <td><label>items</label></td>
  <td>
    <select ng-model="addItems.item" ng-options="item.name for item in itemList" ng-init="getItemsList()">                       
    </select>
  </td>
</tr>

这是我的控制器：

$scope.getItemsList = function() {
    $http({
        method : "GET" ,
        url : "/items/allitems"
    }).success(function(data) {
        $scope.itemList = data;                              
        $scope.additems.item = $scope.itemList[0].id;
    });
};

问题是：我从控制器获取项目列表并通过 ng-model 绑定这些列表。但是我在下拉列表中列出了项目的名称，如果我选择任何特定项目的 id 将被发送到数据库进行存储。

如果我运行此代码，我会在浏览器中得到以下结果：

<option value="?" selected="selected"></option>
<option value="0">pen</option>
<option value="1">notebook</option>
<option value="2">marker</option>

谁能告诉我我是否犯了任何错误，并给我一个提示，让我将第一个值作为默认值而不是空选择

【问题讨论】：

使用“item.id 作为 item.name 在 itemList 中的项目”。如果没有第一部分，它会将名称存储在 additems.item 中，并且它将不起作用。相反，你可以只做 $scope.additems.item = $scope.itemList[i].name;
不，它没有工作 zack.still 它默认显示空值:(

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

可能有一个关于 ng-init 标签的提示，我之前遇到过类似的问题。您可以使用以下 html 代码：

<tr>
  <td><label>items</label></td>
  <td ng-init="getItemsList()">
    <select ng-model="addItems.item" ng-options="item.name for item in itemList">                       
    </select>
  </td>
</tr>

【讨论】：

我试过了，但我不知道为什么在我使用 ng-model 时下拉菜单中有一个空白区域。它没有被选中。
你可以试试这个：

【解决方案2】：

将您的 ng-options 更改为

ng-options="item.id as item.name for item in itemList"

然后你的代码应该可以工作了。

【讨论】：

【解决方案3】：

您可以使用下拉选项 id 或名称在下拉初始化时为模型分配索引如下所示

<tr>
  <td><label>items</label></td>
  <td>
    <select ng-model="addItems.item" ng-options="item.id as item.name for item in itemList" ng-init="addItems.item=itemList[0].id">                       
    </select>
  </td>
</tr>

【讨论】：