javascript - AngularJS <select> issues - Stack Overflow

admin管理员组

文章数量:1389894

I'm having a weird problem. I'm using AngularJS in my app and I'm having issues with tag. I have a Controller to have cities and states handled by my elements:

function MeuController($scope, $http) {  

$scope.states = [];  
$scope.selectedState = '';  

$scope.cities = [];  
$scope.selectedCity = '';  

$http.get('/state/GetStates').success(function(result) {  
    $scope.states = result;  
});  

$scope.getCities = function() {  
    $http.get('/cities/GetCitiesByState?state=' + $scope.selectedState).success(function(result) {  
        $scope.cities = result;  
    });  
}  
});  

At this point, everything is OK and easy to understand. But...

When I create my elements this way:

<select class="span2" name="SelectedState" ng-model="selectedState"   
ng-change="getCities()" ng-options="state.ID as state.Name for state in states">  
    <option></option>  
</select>  

<select class="span6" name="SelectedCity" ng-model="selectedCity"  
ng-options="city.ID as city.Name for city in cities">  
    <option></option>  
</select>  

... my elements aren't filled.

If I try this way:

<select class="span2" name="SelectedState" ng-model="selectedState"   
ng-change="getCities()">  
    <option ng-repeat="state in states" value="state.ID">{{state.Name}}</option>  
</select>  

<select class="span6" name="SelectedCity" ng-model="selectedCity">  
    <option ng-repeat="city in cities" value="city.ID">{{city.Name}}</option>  
</select>  

Now the values are filled into the elements. Although, if I change the value of "selectedState" scope variable, my element doesn't "select" the right value?

Anyone knows why?

Thank you so much!

I'm having a weird problem. I'm using AngularJS in my app and I'm having issues with tag. I have a Controller to have cities and states handled by my elements:

function MeuController($scope, $http) {  

$scope.states = [];  
$scope.selectedState = '';  

$scope.cities = [];  
$scope.selectedCity = '';  

$http.get('/state/GetStates').success(function(result) {  
    $scope.states = result;  
});  

$scope.getCities = function() {  
    $http.get('/cities/GetCitiesByState?state=' + $scope.selectedState).success(function(result) {  
        $scope.cities = result;  
    });  
}  
});  

At this point, everything is OK and easy to understand. But...

When I create my elements this way:

<select class="span2" name="SelectedState" ng-model="selectedState"   
ng-change="getCities()" ng-options="state.ID as state.Name for state in states">  
    <option></option>  
</select>  

<select class="span6" name="SelectedCity" ng-model="selectedCity"  
ng-options="city.ID as city.Name for city in cities">  
    <option></option>  
</select>  

... my elements aren't filled.

If I try this way:

<select class="span2" name="SelectedState" ng-model="selectedState"   
ng-change="getCities()">  
    <option ng-repeat="state in states" value="state.ID">{{state.Name}}</option>  
</select>  

<select class="span6" name="SelectedCity" ng-model="selectedCity">  
    <option ng-repeat="city in cities" value="city.ID">{{city.Name}}</option>  
</select>  

Now the values are filled into the elements. Although, if I change the value of "selectedState" scope variable, my element doesn't "select" the right value?

Anyone knows why?

Thank you so much!

• javascript
• angularjs

Share Improve this question Follow edited Mar 13, 2013 at 15:09 Stewie 60.4k2020 gold badges148148 silver badges113113 bronze badges asked Mar 13, 2013 at 14:56 napfernandesnapfernandes 1,36922 gold badges2323 silver badges4848 bronze badges 1

• Can you post a sample data for states array. I'm asking this coz, the option which you said not working is working if i test it locally without any change to your code. Whether both state and city are not ing or only the state is not ing ? – Rajkamal Subramanian Commented Mar 13, 2013 at 20:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Ok so actually the problem is between ng-model and ng-options.

When you do:

<select class="span6" name="SelectedCity" ng-model="selectedCity"  
ng-options="city.ID as city.Name for city in cities"></select>

Then $scope.selectedCity is assigned to city.ID and not just city (check this fiddle).

You should write it like this:

<select class="span6" name="SelectedCity" ng-model="selectedCity"  
ng-options="city.Name for city in cities"></select>

Check the result in this fiddle.

Does it solve your issue?

本文标签： javascriptAngularJS ltselectgt issuesStack Overflow