當我更改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>