How to get selected value from select box in angularjs

All we need is an easy explanation of the problem, so here it is.

Hello Everyone

I am trying to get option value from select box on button click but it shows undefined in console .Options value are coming from server

Here is my html code

<div class="form-group">
        <label class="control-form" for="cityid">Selct City</label>
        <select type="text" class="form-control" placeholder="City" id="acity" >
            <option value="">--Select City--</option>
            <option ng-repeat="city in cityinfo" ng-value="{{city.id}}"  ng-selected="{{city.id ==cityid}}">{{city.cityname}}</option>
</select>

<button class="btn btn-info prevnext pull-right" ng-click="nextpage()">Next <i class="fa fa-arrow-right"></i></button>

Controller.js file code

  $scope.nextpage = function(pageno) {
   console.log($scope.cityinfo);
   }

Select box image

Thanks in advance

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Use ng-options instead of ng-repeat.

Like this:

Updated

<select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="selectedCity">
    <option value="">--Select City--</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-click="nextpage(selectedCity)">Next <i class="fa fa-arrow-right"></i></button>

JS:

$scope.nextpage = function(selectedCity){
    console.log(selectedCity);
}

Method 2

Here is the sample code.

Html code

 <select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="currentCity">
    <option value="">--Select Cities--</option>
</select>
 <button class="btn btn-info prevnext pull-right" ng- 
  click="nextpage(currentCity)">Next <i class="fa fa-arrow-right"></i> 
  </button>

JS function

$scope.nextpage = function(currentCity){
    console.log(currentCity);
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply