问题描述
单击按钮时如何在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>
在控制器中-
$scope.populateTimeZone = function (world_timezones) {
};
杰森数据-
{
"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"
]
},
}
}
但是我得到空字符串。
1楼
从AngularJS文档中：
要将模型绑定到非字符串值，可以使用以下策略之一：
- ngOptions指令（选择）
- ngValue指令，它允许任意表达式成为选项值（示例）
- 模型$ parsers / $ formatters转换字符串值（示例）
选项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： ://next.plnkr.co/edit/l5H87H8k7Af5XIqH open lib%2Fscript.js deferRun
选项2：具有分组依据的ng-options
这是在select上使用ng-options的可能解决方案。
您仍然可以通过按国家/地区名称对时区进行分组的groupB功能。
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： ://next.plnkr.co/edit/Y4AVNU9X6MUAzckz open lib%2Fscript.js deferRun