使用 ng-repeat 的 AngularJS 依赖下拉列表答案

【问题标题】：AngularJS Dependent dropdown with ng-repeat使用 ng-repeat 的 AngularJS 依赖下拉列表
【发布时间】：2016-04-08 23:06:20
【问题描述】：

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

第一个下拉菜单的数据来自一个数据集。它列出了与帐户 ng-repeat="option in acctList" 关联的号码。

我想转到不同的数据集，找到匹配的帐号，然后显示与该帐户相关的客户。当第一个下拉菜单中没有选择任何内容时，第二个下拉菜单应该不显示任何内容（空白）。

这是我的两个下拉菜单：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 但它不起作用。我还试了一下这个教程：http://kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/

但是，他使用 $watch ，我看到有人建议他不要这样做，而且他必须为每个场景编写一个 if 循环，这不太理想。

我尝试过使用 ng-change，但我认为应该有更简单的方法，例如 filter 或 track by。我也想知道是否应该从 ng-repeat 更改为 ng-option。任何人都知道一个简单的方法来做到这一点？

【问题讨论】：

标签： javascript angularjs ng-repeat angularjs-filter ng-options

【解决方案1】：

最好将您选择的选项与 ng-options 绑定。请参阅下面的代码，希望对您有所帮助。

<body ng-app="app">
<h1>Hello Plunker!</h1>
<div ng-controller="MainCtrl">
  <p>{{ test }}</p>
  <select ng-model="defcom" ng-options="opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >>
  </select>
  <select ng-model="com" ng-options="opt.Customer for opt in cust_info | filter: {Com: defcom.DefCom}: true">


  </select>
</div>

编辑：在组合更改之前保留原始值

angular.module("app", []).controller("MainCtrl", function($scope) {
$scope.test = "This is a test";
$scope.acct_info = [ 
.
.
.
(put this below your data definition)
$scope.defcom = $scope.acct_info[0];
var original_defcom = $scope.defcom;
var original_com = $scope.com;

请参阅 plunker：http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview

【讨论】：

您的代码有效，但它不保留原始的默认选项。你知道如何添加默认值吗？
数据处理应该在你的控制器中完成。一开始你可以这样做： var original_defcom = $scope.defcom; var original_com = $scope.com;
是的，我在控制器中有这个，但是如何使用 ng-options 引用它？
查看更新的答案，让我知道它是否按预期工作。
不工作，这里是 plunk：plnkr.co/edit/TGoWTMqOuJnWKNTUARWI?p=preview

【解决方案2】：

您需要将选项的值设置为{{option.DefCom}} 并为选择设置模型。然后将该模型用作下一个选择的过滤器。您还需要使用ng-init 设置选择的当前值。

这是一款适合您的 Plunker： http://plnkr.co/edit/hIyz5pXpsoD2QpR8uo2o?p=preview

【讨论】：