1
我開發一個頁面的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
任何形式的幫助是非常讚賞。