javascript - 如何在 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>

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

但是我得到的是空字符串。

Answer 1

来自 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