Angular Drop down with dependencies on first drop down

Question

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": 1, 4 and 7. 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. (account 1 has customers 1-2, account 4 has customers 3-4, and account 7 has customers 5-7). 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'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?

score 0 · Answer 1 · answered Apr 08 '16 at 19:16

0

Use ng-if in your second <option> tag, may it is, whatever you want

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

answered Apr 08 '16 at 19:16

ojus kulkarni

1,877
3
25
41

This does not work in the example. When you select "1" on the first dropdown, it should only show options 1 and 2. When you select "2" it should show options 3 and 4 and so on. – jenryb Apr 08 '16 at 19:40

Angular Drop down with dependencies on first drop down

1 Answers1