如何在angularjs中单击按钮时获得选定的值？

Question

单击按钮时如何在 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) {

};

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"
          ]
        },
    }
    }

但我得到的是空字符串。

Answer 1

来自 AngularJS 文档：

要将模型绑定到非字符串值，可以使用以下策略之一：

• ngOptions 指令（选择）
• ngValue 指令，允许任意表达式成为选项值（示例）
• model $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