当我更改AngularJS中另一个选择选项的值时，如何更改选择选项值？

Question

我在更改AngularJS中另一个选择选项的值时尝试更改选择选项值。当我在W3schools.com上试图做到这一点时，它的工作，但在我的发展，它不。我测试的工作代码是available here。 https://www.w3schools.com/code/tryit.asp?filename=FD084OYCQJ6U

这是我的AngularJS JavaScript。
模式是这样的：

$scope.modelCountry = [ { ID : 1, Name : 'Philippines'}, { ID : 2, Name : 'United States'} ]; 
$scope.changeCountry = function (stateID) { 
    if (stateID == 1) { 
    //$scope.CountryName = "Philippines"; 
    return 'Philippines'; 
    } 
    else if (stateID > 1) { 
    //$scope.CountryName = "US United States"; 
    return 'United States'; 
    } 
} 

这是我的HTML：

<div class="col-md-12 padding-top-5px"><!--State--> 
    <div class="col-md-2"><span class="pull-right">State <b>*</b></span></div> 
    <div class="col-md-3"> 
    <select class="form-control" ng-model="selectedState" ng-options="state.Name for state in modelState" ng-change="selectedCountryName=changeCountry(selectedState.ID)"> 
     <option value="">Select State</option> 
    </select> 
    </div> 
</div><!-- End State--> 
<div class="col-md-12 padding-top-5px"><!--Location--> 
    <div class="col-md-2"><span class="pull-right">Country <b>*</b></span></div> 
    <div class="col-md-3"> 
    <select class="form-control" ng-model="selectedCountryName" ng-options="country.Name for country in modelCountry"> 
     <option value="">Select Country</option> 
    </select> 
    </div> 
</div><!-- End Location--> 

Answer 1

我不知道你正在尝试做的，但双select正常使用情况下一个正在改变如下所示，当用户更改第一个select的选择时，第二个选项列表select。

angular.module('test', []).controller('Test', Test); 
 

 
function Test($scope) { 
 
    $scope.types = [ 
 
    { id: 1, name: 'fruits' }, 
 
    { id: 2, name: 'vehicles' } 
 
    ] 
 
    
 
    var fruits = [ 
 
    { id: 1, name: 'apple' }, 
 
    { id: 2, name: 'banana' }, 
 
    { id: 3, name: 'orange' } 
 
    ] 
 
    
 
    var vehicles = [ 
 
    { id: 4, name: 'car' }, 
 
    { id: 5, name: 'bus' }, 
 
    { id: 6, name: 'lorry' } 
 
    ] 
 
    
 
    $scope.changeType = function() { 
 
    $scope.selectedItem = 0; 
 
    
 
    if ($scope.selectedType == 1) { 
 
     $scope.items = fruits; 
 
    } 
 
    else if ($scope.selectedType == 2) { 
 
     $scope.items = vehicles; 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<div ng-app='test' ng-controller='Test'> 
 
    <select ng-model='selectedType' 
 
      ng-options='type.id as type.name for type in types' 
 
      ng-change='changeType()'> 
 
      
 
    <option value="">Select type</option>   
 
    </select> 
 
    
 
    <select ng-model='selectedItem' 
 
      ng-options='item.id as item.name for item in items'> 
 
      
 
     <option value="">Select item</option> 
 
    </select> 
 
</div>