Angular 下拉菜单依赖于第一个下拉菜单

Question

我有两个下拉字段，其中第二个取决于第一个中的选择。

第一个下拉菜单的数据来自一个数据集。它列出了与帐户 ng-repeat="option in acctList" 关联的号码：1、4 和 7。 我想转到不同的数据集，找到匹配的帐号，然后显示与该帐户相关的客户。 （账户 1 有客户 1-2，账户 4 有客户 3-4，账户 7 有客户 5-7）。当第一个下拉菜单中没有选择任何内容时，第二个下拉菜单应该不显示任何内容（空白）。

这是我的两个下拉菜单：http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview

这是我的控制器：

angular.module("app", [])
  .controller("MainCtrl", function($scope) {
    $scope.test = "This is a test";
    $scope.defnum = 1;
    $scope.acct_info = [
      {
        "Req": "MUST",
        "DefCom": "1"
      },
      {
        "Req": "NoMUST",
        "DefCom": "5"
      },
      {
        "Req": "MUST",
        "DefCom": "4"
      },
      {
        "Req": "MUST",
        "DefCom": "7"
      }
    ];

    $scope.cust_info = [
      {
        "Customer": "1",
        "Com": "1"
      },
      {
        "Customer": "2",
        "Com": "1"
      },
      {
        "Customer": "3",
        "Com": "4"
      },
      {
        "Customer": "4",
        "DefCom": "4"
      },
      {
        "Customer": "5",
        "DefCom": "7"
      },
      {
        "Customer": "6",
        "DefCom": "7"
      },
      {
        "Customer": "7",
        "DefCom": "7"
      }
    ];
  });

我添加了ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" 以尝试根据此 SO 答案过滤第二个：Filter ng-options from ng-options selection 但它不起作用。 我尝试过使用 ng-change，但我认为应该有更简单的方法，例如 filter 或 track by。我也想知道是否应该从 ng-repeat 更改为 ng-option。任何人都知道一个简单的方法来做到这一点？

Answer 1

在你的第二个<option> 标签中使用ng-if，可以，随便你

 <select>
    <option ng-selected="defnum == option.DefCom" ng-repeat="option in acct_info | filter:{Req:'MUST'}:true">
      {{ option.DefCom }}
    </option>

  </select>
  <select>
    <option ng-if="option.DefCom" ng-selected="" ng-repeat="option in cust_info">
      {{ option.Customer}}
    </option>

  </select>