как получить выбранное значение по нажатию кнопки в 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 data--

{
    "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 (select)
• директива 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);
    };
}

Плункр: https://next.plnkr.co/edit/Y4AVNU9X6MUAzckz?open=lib%2Fscript.js&deferRun=1