how to get selected value on button click in angularjs?

Question

How to get selected value in angulajs when clicked on the button, im using the following code please suggest me?

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

in Controller--

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

But im getting empty string.

Michael Lynch · Accepted Answer · 2019-02-12 19:54:43Z

1

From the AngularJS docs:

To bind the model to a non-string value, you can use one of the following strategies:

the ngOptions directive (select)
the ngValue directive, which allows arbitrary expressions to be option values (Example)
model $parsers / $formatters to convert the string value (Example)

https://docs.angularjs.org/api/ng/directive/select

Option 1: Add ng-value

All you need to do is add an ng-value to your options and it should work. You also might want to add a ng-disabled="true" to your group headers so that it prevents the user from selecting "India" and not an actually timezone.

<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

Option 2: ng-options with group by

Here's a possible solution using ng-options on the select. You can still achieve a groupBy functionality grouping your timezones by country name.

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

edited Feb 12, 2019 at 19:54

answered Feb 12, 2019 at 19:05

Michael Lynch

1,73315 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PK-1825 Over a year ago

Thank you so much.. but my json data is different than yours so I used above format.. I have uploaded json above.

Michael Lynch Over a year ago

I can make some slight adjustments based on the way the data is formatted, once you include the data just give me a moment. :D

PK-1825 Over a year ago

Added json data.

Michael Lynch Over a year ago

Updated the answer and plunkr. Basically just taking the timezone data and flattening it so that each item in the select is a different entry in the list.

Michael Lynch Over a year ago

I added a secondary option aswell. Basically just adding ng-value to your existing solution. I'm a little more fond of the second solution, as I feel its more accurate to use the group by, however, both are valid. Enjoy :D

|

Collectives™ on Stack Overflow

how to get selected value on button click in angularjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related