javascript - 更改选择框中的数据

Question

我的页面上有 3 个不同的选择框。如果我在第一个选择框中选择了一个选项，我希望第二个选择框中的选项更改为属于您在第一个选择框中选择的值的选项。

我想要第三个选择框也有同样的效果。如果我在第二个选择框中选择了一个选项，我希望第三个选择框中的选项更改为属于第二个选择框中的值的选项。

有什么建议如何在 AngularJS 中尽可能简单地做到这一点吗？

Answer 1

您可以通过将 ng-options 与 Angular 过滤器结合使用来实现此目的

Controller

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.countries = {
      'India': {
        'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
        'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],
      },
      'USA': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
      },
      'Australia': {
        'New South Wales': ['Sydney', 'Orange', 'Broken Hill'],
        'Victoria': ['Benalla', 'Melbourne']
      }
    };
  })

标记

 <div ng-controller="Ctrl">
    <div class="container">>
      <div class="form-group">
        <label class="control-label" for="Country">Country:</label>
        <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="States">States:</label>
        <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="City">City:</label>
        <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
      </div>
    </div>
  </div>

Working Plunkr