单击按钮时如何在 angulajs 中获取所选值,我使用以下代码,请建议我?
<div class="form-inline">
<div class="form-group">
<select class="form-control" data-ng-model="selectedTimeZone">
<option data-ng-repeat-start="(key, value) in timeZoneData.countries" data-ng-bind="value.name"></option>
<option data-ng-repeat-end="" data-ng-repeat="tz in value.timezones" data-ng-bind="' - ' + tz"></option>
</select>
</div>
<div class="form-group">
<input id="btnAddTimeZone" type="button" value="Add Time Zone" class="btn btn-default" data-ng-click="populateTimeZone(selectedTimeZone)"/>
</div>
</div>
在 Controller 中--
$scope.populateTimeZone = function (world_timezones) {
};
Json数据--
{
"countries": {
"US": {
"id": "US",
"name": "United States",
"timezones": [
"America/New_York",
"America/Detroit",
]
},
"CA": {
"id": "CA",
"name": "Canada",
"timezones": [
"America/St_Johns",
"America/Halifax",
]
},
"IN": {
"id": "IN",
"name": "India",
"timezones": [
"Asia/Kolkata"
]
},
}
}
但是我得到的是空字符串。
最佳答案
来自 AngularJS 文档:
要将模型绑定(bind)到非字符串值,您可以使用以下策略之一:
- ngOptions 指令(选择)
- ngValue 指令,允许任意表达式作为选项值(示例)
- 模型 $parsers/$formatters 来转换字符串值(示例)
https://docs.angularjs.org/api/ng/directive/select
选项 1:添加 ng-value
您所需要做的就是向您的选项添加一个ng-value
,它应该可以工作。您可能还想在组标题中添加 ng-disabled="true"
,以防止用户选择“印度”而不是实际的时区。
<option ng-repeat-start="(key, value) in timezones.countries" ng-bind="value.name" ng-disabled="true"></option>
<option ng-repeat-end="" ng-repeat="tz in value.timezones" ng-bind="' - ' + tz" ng-value="tz"></option>
Plunkr:https://next.plnkr.co/edit/l5H87H8k7Af5XIqH?open=lib%2Fscript.js&deferRun=1
选项 2:带有分组依据的ng-options
这是在选择上使用 ng-options
的可能解决方案。您仍然可以实现 groupBy 功能,按国家/地区名称对时区进行分组。
HTML
<form>
<label>Timezone: </label>
<select class="form-control" ng-model="selectedTimezone" ng-options="tz.timezone group by tz.country for tz in timezones"></select>
</form>
<button class="btn btn-secondary" ng-click="populateTimeZone()">Add Timezone</button>
JavaScript
function MainCtrl($scope, MainService) {
$scope.selectedTimezone = undefined;
$scope.timezones = [];
MainService.loadTimezones().then(function(timezoneData){
$scope.timezones = Object.values(timezoneData.countries).flatMap(c => {
return c.timezones.map(tz => {
return {id: c.id, name: c.name, timezone: tz};
});
});
});
$scope.populateTimeZone = function(){
console.log('selectedTimezone', $scope.selectedTimezone);
};
}
Plunkr:https://next.plnkr.co/edit/Y4AVNU9X6MUAzckz?open=lib%2Fscript.js&deferRun=1
关于javascript - 如何在 AngularJS 中单击按钮时获取所选值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54654846/