Reputation: 2470
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);
}
Thanks in advance
Upvotes: 5
Views: 28419
Reputation: 46
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);
}
Upvotes: 2
Reputation: 1967
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);
}
Upvotes: 12