I am developing a single page web application where a form input generates a result table, which i populate from a json array which is received from back-end spring controller in form's submit function(written in angular controller).
Now my table have two columns: release location and date. release_location is a dropdown containing countries, and date is a release date corresponding to the specific country. I have developed till the point where the dropdown show the countries as options and when any country is selected, the corresponding date populates in the date column. My requirement is to show the first option as default and also populate the corresponding date of that option in the date column's cell. Have a look at my code.
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"
}
]
}
];
};
});
Here is an example plunker link of my development so far. https://plnkr.co/edit/6k5OggVKkUEyPEqKW1qp
Any kind of help is very much appreciated.
If you add ng-init and set it to the first element in the array it will get selected. Please find the code in the below link.
Code:
<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>