如何在使用 ng-options 创建的 html 下拉列表中设置默认值
How to set default value in a html dropdown which is created using ng-options
我正在开发一个单页 Web 应用程序,其中表单输入生成结果 table,我从后端 spring 控制器接收的 json 数组填充该结果在表单的提交函数中(写在 angular 控制器中)。
现在我的 table 有两列:发布位置和日期。 release_location 是包含国家的下拉列表,date 是对应特定国家的发布日期。我已经开发到下拉列表将国家/地区显示为选项并且选择任何国家/地区时,相应的日期会填充在日期列中。我的要求是将第一个选项显示为默认选项,并在日期列的单元格中填充该选项的相应日期。看看我的代码。
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"
}
]
}
];
};
});
这是我目前开发的一个 plunker link 示例。
https://plnkr.co/edit/6k5OggVKkUEyPEqKW1qp
非常感谢任何形式的帮助。
如果您添加 ng-init
并将其设置为数组中的第一个元素,它将被选中。请在下面找到代码 link.
代码:
<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>
我正在开发一个单页 Web 应用程序,其中表单输入生成结果 table,我从后端 spring 控制器接收的 json 数组填充该结果在表单的提交函数中(写在 angular 控制器中)。
现在我的 table 有两列:发布位置和日期。 release_location 是包含国家的下拉列表,date 是对应特定国家的发布日期。我已经开发到下拉列表将国家/地区显示为选项并且选择任何国家/地区时,相应的日期会填充在日期列中。我的要求是将第一个选项显示为默认选项,并在日期列的单元格中填充该选项的相应日期。看看我的代码。
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"
}
]
}
];
};
});
这是我目前开发的一个 plunker link 示例。 https://plnkr.co/edit/6k5OggVKkUEyPEqKW1qp
非常感谢任何形式的帮助。
如果您添加 ng-init
并将其设置为数组中的第一个元素,它将被选中。请在下面找到代码 link.
代码:
<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>