AngularJS Dependent dropdown with ng-repeat

问题

I have two drop down fields where the second one is dependent on the selection in the first.

The data for the first drop down comes from one data set. It lists the number associated with an account ng-repeat="option in acctList".

I want to go to a different data set, find the account numbers that match, and then show the Customers that are related to that account. The second drop down should show nothing (blank) when nothing has been selected in the first.

Here is my plunker with the two drop downs: http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview

Here is my controller:

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"
      }
    ];
  });

I added ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" to try to filter the second based on this SO answer: Filter ng-options from ng-options selection But it's not working. I also took a stab looking at this tutorial: http://kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/

however, he uses $watch which I've seen is advised against, and he had to write out an if loop for every scenario, which is less than ideal.

I've tried using ng-change, but I think there should be an easier way, like a filter or track by. I'm wondering also if I should change from ng-repeat to ng-option. Anyone have insight on an easy way to do this?

回答1:

It's better to bind the options of your select with ng-options. See my code below, I hope it helps.

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

EDIT: keep the original values before combos are changed

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;

See plunker: http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview

回答2:

You need to set the value for the options as {{option.DefCom}} and set a model for the select. Then use that model as a filter for the next select. Also you need to use ng-init to set the current value for the select.

Here's a Plunker for you: http://plnkr.co/edit/hIyz5pXpsoD2QpR8uo2o?p=preview

来源：https://stackoverflow.com/questions/36510713/angularjs-dependent-dropdown-with-ng-repeat

标签

javascript

angularjs

ng-repeat

angularjs-filter

ng-options