如何在使用 ng-options 创建的 html 下拉列表中设置默认值答案

【问题标题】：How to set default value in a html dropdown which is created using ng-options如何在使用 ng-options 创建的 html 下拉列表中设置默认值
【发布时间】：2017-08-26 19:24:41
【问题描述】：

我正在开发一个单页 Web 应用程序，其中表单输入生成一个结果表，我从一个 json 数组中填充该结果表，该数组是从表单的提交函数中的后端 spring 控制器接收的（用角度控制器编写）。

现在我的表格有两列：发布位置和日期。 release_location 是包含国家/地区的下拉菜单，date 是与特定国家相对应的发布日期。我已经开发到下拉菜单将国家/地区显示为选项并且选择任何国家/地区时，相应的日期会填充在日期列中。我的要求是将第一个选项显示为默认选项，并在日期列的单元格中填充该选项的相应日期。看看我的代码。

HTML：

    <body data-ng-app="searchisbn" data-ng-controller="isbnCtrl">
  <!-- This button emulates the submit button of my actual form and initializes the json
  array which my backend actually send to angular" -->
  <button class="btn btn-primary btn-md" data-ng-click="createData()">Create Test Data</button>

  <div>
    <table id="isbnTable"
                                    class="table table-hovser table-bordered table-striped table-responsive">
                                    <thead class="thead-inverse text-center">
                                        <tr>
                                            <th>ISBN 10</th>
                                            <th>Release Location</th>
                                            <th>Release Date</th>
                                        </tr>
                                        <tr>
                                            <td><input class="w-100" data-ng-model="f.isbn10"
                                                placeholder="Search Isbn10"></td>
                                            <td><input class="w-100"
                                                data-ng-model="f.releaseData"
                                                placeholder="Search By Release Location" disabled></td>
                                            <td><input class="w-100"
                                                data-ng-model="f.releaseData"
                                                placeholder="Search By Release Date" disabled></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="isbn in isbns | filter:f">
                                            <td>{{isbn.isbn10}}</td>
                                            <td><select class="w-100" name="isbnDateSelect"
                                                id="isbnDateSelect"
                                                data-ng-options="releaseInstance.releaseLocation for releaseInstance in isbn.releaseData"
                                                data-ng-model="item"></select></td>
                                            <td>{{item.releaseDate}}</td>
                                            <!-- <td data-ng-if='!item.map.releaseDate.length'><div data-ng-repeat = "releaseDetail in isbn.map.releaseData.myArrayList"><p data-ng-if="releaseDetail.map.releaseLocation==='NY'">{{releaseDetail.map.releaseDate}}</p></div></td> -->
                                        </tr>
                                    </tbody>
                                </table>
  </div>
  <script data-require="jquery@*" data-semver="3.2.1"
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.6.5"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"
        type="text/javascript"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.9/js/tether.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/3de3deee4d.js"></script>
    <script src="script.js"></script>
</body>

Javascript

var isbnApp = angular.module("searchisbn", []);

//controller code
isbnApp.controller("isbnCtrl", function($scope, $http) {

$scope.isns = "";

$scope.createData = function() {

  $scope.isbns = [
    { 
    "isbn10":"1234567890",
    "releaseData":[
        {
          "releaseLocation":"USA",
          "releaseDate":"01/02/2017"
        },
        {
          "releaseLocation":"CAN",
          "releaseDate":"03/04/2016"
        }
      ]
    },
    { 
    "isbn10":"9876543210",
    "releaseData":[
        {
          "releaseLocation":"AUS",
          "releaseDate":"05/06/2015"
        },
        {
          "releaseLocation":"IND",
          "releaseDate":"07/08/2014"
        }
      ]
    }
  ];
};
});

这是迄今为止我开发的一个示例 plunker 链接。 https://plnkr.co/edit/6k5OggVKkUEyPEqKW1qp

非常感谢任何形式的帮助。

【问题讨论】：

标签： javascript angularjs angularjs-scope angularjs-ng-repeat ng-options

【解决方案1】：

如果您添加 ng-init 并将其设置为数组中的第一个元素，它将被选中。请在以下链接中找到代码。

Plunkr

代码：

<td>
    <select class="w-100" name="isbnDateSelect" id="isbnDateSelect" 
    data-ng-options="releaseInstance.releaseLocation for releaseInstance in isbn.releaseData" 
    data-ng-model="item" ng-init="item=isbn.releaseData[0];"></select>
</td>

【讨论】：