Je développe une application web d'une seule page où une entrée de formulaire génère une table de résultats, que je remplis à partir d'un tableau json qui est reçu depuis le backend contrôleur de ressort dans la fonction de soumission du formulaire (écrit dans le contrôleur angulaire).Comment définir la valeur par défaut dans une liste déroulante html qui est créée en utilisant ng-options
Maintenant, ma table a deux colonnes: lieu de publication et date. release_location est une liste déroulante contenant des pays, et date est une date de sortie correspondant au pays spécifique. J'ai développé jusqu'à ce que la liste déroulante montre les pays comme options et quand un pays est sélectionné, la date correspondante apparaît dans la colonne de date. Mon exigence est d'afficher la première option par défaut et de renseigner la date correspondante de cette option dans la cellule de la colonne de date. Jetez un oeil à mon 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="[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"
}
]
}
];
};
});
Voici un exemple de lien plunker de mon développement jusqu'à présent. https://plnkr.co/edit/6k5OggVKkUEyPEqKW1qp
Toute sorte d'aide est très appréciée.