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，如下所示。

＆＃13;

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;
    }
  }
}

＆＃13;

<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>

＆＃13;

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

1 个答案: