Angular下拉,依赖于第一个下拉列表

时间:2016-04-08 18:36:13

标签: javascript angularjs filter ng-repeat angularjs-ng-change

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

第一个下拉列表的数据来自一个数据集。它列出了与帐户public class DocumentCategoryModel : IDocumentCategoryTree { public DocumentCategoryModel() { SubCategories = new List<IDocumentCategoryTree>(); } public int ID { get; set; } public ICollection<IDocumentCategoryTree> SubCategories { get; set; } } 关联的号码:1,4和7。 我想转到其他数据集,找到匹配的帐号,然后显示与该帐户相关的客户。 (帐户1有客户1-2,帐户4有客户3-4,帐户7有客户5-7)。如果在第一个中没有选择任何内容,则第二个下拉列表不显示任何内容(空白)。

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

这是我的控制器:

ng-repeat="option in acctList"

我添加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" } ]; }); 尝试根据此SO答案过滤第二个:Filter ng-options from ng-options selection 但它不起作用。 我尝试过使用ng-change,但我认为应该有一种更简单的方法,例如ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }"filter。我还想知道是否应该从ng-repeat更改为ng-option。任何人都有一种简单的方法可以做到这一点吗?

1 个答案:

答案 0 :(得分:0)

在您的第二个ng-if标记中使用<option>,可能是,无论您想要什么

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