1
フォーム入力が結果テーブルを生成するシングルページWebアプリケーションを開発しています。これはバックエンドから受け取ったjson配列スプリングコントローラはフォームのサブミット機能（角度コントローラで書かれています）にあります。ng-optionsを使用して作成されたhtmlドロップダウンでデフォルト値を設定する方法
私のテーブルには、リリースの場所と日付の2つの列があります。 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
どのような助けもありがとうございます。