如何在HTML下拉列表中设置默认值是使用NG选项创建

问题描述：

我开发一个页面的Web应用程序，其中一个表单输入生成的结果表，这是我从是从后端收到一个JSON数组填充弹簧控制器在窗体的提交功能（写在角度控制器）。如何在HTML下拉列表中设置默认值是使用NG选项创建

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

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="[email protected]*" data-semver="3.2.1" 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script data-require="[email protected]*" 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":"", 
    "releaseData":[ 
     { 
      "releaseLocation":"AUS", 
      "releaseDate":"05/06/2015" 
     }, 
     { 
      "releaseLocation":"IND", 
      "releaseDate":"07/08/2014" 
     } 
     ] 
    } 
    ]; 
}; 
});

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

任何形式的帮助是非常赞赏。

答

如果添加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>

如何在HTML下拉列表中设置默认值是使用NG选项创建

相关推荐