AngularJS 1.3 - 根据另一个下拉菜单中的选择显示下拉菜单的内容

【问题标题】：AngularJS 1.3 - Display content of drop-down depending on selection in another drop-down menuAngularJS 1.3 - 根据另一个下拉菜单中的选择显示下拉菜单的内容
【发布时间】：2016-02-25 12:05:39
【问题描述】：

我想知道如何在两个单独的下拉菜单中设置以下数据结构，其中第二个下拉菜单的内容取决于第一个菜单的选择。我的结构是：

{ level1a:{ Item1, Item2, Item3, Item4 }, level1b:{ Item5, Item6, Item7, Item8 } }

我想要以下程序：

如果我在第一个菜单中选择“level1a”，那么只有内容Item1，..，Item4应该出现在第二个下拉菜单中，相应地选择“level1b”的选择。我想知道是否有“上一个按钮上的过滤器选项”。有人知道如何设置吗？任何帮助将不胜感激！

干杯，安迪

【问题讨论】：

您使用的是哪个下拉菜单？

标签： angularjs

【解决方案1】：

使用ng-change，您可以在第一次选择完成后调用一个函数，然后在该函数中为第二次选择设置数据

在控制器中：

$scope.choice = ['a','b']

$scope.a = ['Item1','Item2','Item3','Item4'];
$scope.b = ['Item5','Item6','Item7','Item8'];

$scope.data = [];

  $scope.change = function(choice) {
    if (choice == 'a'){
      $scope.data = $scope.a;
    } else {
      $scope.data = $scope.b;
    }   
};

在 HTML 中：

<select ng-model="selection" ng-change="change(selection)">
  <option value="">---Please select---</option> 
  <option value="a">Option 1</option>
  <option value="b">Option 2</option>
</select><br>

<select ng-model="selectionTwo">
  <option ng-repeat="option in data" value="{{option}}">{{option}}</option>
</select>

我打算提供一个 plunker，但无法保存它，不知道为什么.. 如果它解决了我会编辑

编辑：设法保存plunker

【讨论】：