How to use dependent drop down list using AngularJS?

Question

I'm working on AngularJS. I'm trying to use the drop down list in dependent manner but in my second drop down list i'm getting undefined as the data after i select the first drop down. Please can any one help me from this ?

Here is my Html :

    <!DOCTYPE html>
    <html>

      <head>
        <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>

      <body>

     <div ng-app="Aplic" ng-controller="CountryCntrl">
        <select name="country" ng-model="selectedCountry" ng-options="country.productGroup as country.productGroup for country  in countries">
            <option value="">Choose</option>
        </select>

        Departement:
        <select name="state" 
        ng-model="selectedCountry"
        ng-options="state.productGroup as state.productCode for state in ((countries | filter:{'productCode':selectedCountry})[0].productGroup) track by state.productCode">
            <option value="">Choose</option>
        </select>
    </div>

      </body>

    </html>


And my  script :



// Code goes here

 var Aplic = angular.module("Aplic", []);

 Aplic.controller('CountryCntrl', function ($scope) {

     $scope.countries =
   [
  {
    "productCode": "PRD2_SBBD",
    "productGroup": "SBBD"
  },

  {
    "productCode": "SBM_WDC_L2",
    "productGroup": "SBML"
  },

  {
    "productCode": "SMP_WDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_BA_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "UN_SBML",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_UB_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_UB_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_HP1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_MLAC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_MLAC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_LOW_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_LTV",
    "productGroup": "SBML"
  },

  {
    "productCode": "MUL",
    "productGroup": "SBML"
  }
  ];
 });

And let me show you the plunker for reference:

http://plnkr.co/edit/Jh3SyewxbvbubnK1W6GY?p=preview.

Is it possible to change the JSON data? I think the structure could be optimized. — jlast
– jlast, Commented Dec 20, 2016 at 10:09

Aruna · Accepted Answer · 2016-12-20 10:10:40Z

2

Here you go (Just click Run code snippet below):

// Code goes here

 var Aplic = angular.module("Aplic", []);

 Aplic.controller('CountryCntrl', function ($scope) {
    
     $scope.countries =
   [
  {
    "productCode": "PRD2_SBBD",
    "productGroup": "SBBD"
  },
  {
    "productCode": "PRD4_SBBD",
    "productGroup": "SBBD"
  },
  {
    "productCode": "PRD1_SBBD",
    "productGroup": "SBBD"
  },
  {
    "productCode": "PRD3_SBBD",
    "productGroup": "SBBD"
  },
  {
    "productCode": "PRD_SBBD",
    "productGroup": "SBBD "
  },
  {
    "productCode": "EF_L3",
    "productGroup": "EF"
  },
  {
    "productCode": "EF_L4",
    "productGroup": "EF"
  },
  {
    "productCode": "EF_L5",
    "productGroup": "EF"
  },
  {
    "productCode": "EF_L1",
    "productGroup": "EF"
  },
  {
    "productCode": "EF_L2",
    "productGroup": "EF"
  },
  {
    "productCode": "PPC_UB_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L5",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L6",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_L7",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_UB_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "PPC_UB_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHL_BA_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHL_BA_L2",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHL_WCDC_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SHL_WDC_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHL_WCDC_L2",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SHL_WDC_L2",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHA_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHA_L2",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHL_AL_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHL_AL_L2",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHP_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_BA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_BA_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_BA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_WCDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SHPA_WDC_2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHPA_WCDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SHPA_WDC_1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_WCDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SHP_WDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_WCDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SHP_WDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "UN_SBHL",
    "productGroup": "SBHL"
  },
  {
    "productCode": "SBHP_AC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_AC_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBHP_AC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_BA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_BA_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_BA_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_WCDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SML_WDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_WCDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBM_WDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_WCDC_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBM_WDC_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_WCDC_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBM_WDC_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMLA_BA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMLA_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMLA_WCDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SMLA_WDC_2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMLA_WCDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SMLA_WDC_1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_AC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_LOW_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBM_LO_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_AC_LT",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_BA_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_UB_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_UB_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_UB_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_UB_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_WCDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SMP_WDC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_WCDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SMP_WDC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_BA_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBMP_BA_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "UN_SBML",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_UB_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "SBML_UB_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "ML_AC_TN_1",
    "productGroup": "SBML"
  },
  {
    "productCode": "ML_AC_TN_2",
    "productGroup": "SBML"
  },
  {
    "productCode": "TP_SBHL_BA",
    "productGroup": "SBHL"
  },
  {
    "productCode": "VK_SBML_L5",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBHL_L1",
    "productGroup": "SBHL"
  },
  {
    "productCode": "VK_AC_HP2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_HP3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_MLAC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_MLAC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_HP1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_MLAC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_MLAC_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_LOW_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_AC_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_HP3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_HP2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_AC_HP1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_LOW_LTV",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L5",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L6",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L7",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBHP_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBML_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBHP_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VT_SBHP_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBHP_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L6",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L7",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L2",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBHP_L1",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBML_L4",
    "productGroup": "SBML"
  },
  {
    "productCode": "VK_SBHP_L3",
    "productGroup": "SBML"
  },
  {
    "productCode": "B1L",
    "productGroup": "SBML"
  },
  {
    "productCode": "B1S",
    "productGroup": "SBML"
  },
  {
    "productCode": "B2L",
    "productGroup": "SBML"
  },
  {
    "productCode": "B2S",
    "productGroup": "SBML"
  },
  {
    "productCode": "H1L",
    "productGroup": "SBML"
  },
  {
    "productCode": "H1S",
    "productGroup": "SBML"
  },
  {
    "productCode": "H2L",
    "productGroup": "SBML"
  },
  {
    "productCode": "H2S",
    "productGroup": "SBML"
  },
  {
    "productCode": "M1H",
    "productGroup": "SBHL"
  },
  {
    "productCode": "M1L",
    "productGroup": "SBML"
  },
  {
    "productCode": "M1M",
    "productGroup": "SBML"
  },
  {
    "productCode": "M2L",
    "productGroup": "SBML"
  },
  {
    "productCode": "M2M",
    "productGroup": "SBML"
  },
  {
    "productCode": "MHL",
    "productGroup": "SBHL"
  },
  {
    "productCode": "MHS",
    "productGroup": "SBHL"
  },
  {
    "productCode": "MSL",
    "productGroup": "SBML"
  },
  {
    "productCode": "MSS",
    "productGroup": "SBML"
  },
  {
    "productCode": "MUL",
    "productGroup": "SBML"
  }
  ];
 });

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
  </head>

  <body>
    
 <div ng-app="Aplic" ng-controller="CountryCntrl">
    <select name="country" ng-model="selectedCountry" ng-options="country.productGroup as country.productGroup for country  in countries">
        <option value="">Choose</option>
    </select>
    
    Departement:
    <select name="state" 
    ng-model="selectedState"
    ng-options="state.productGroup as state.productCode for state in countries | filter:{'productGroup':selectedCountry} track by state.productCode">
        <option value="">Choose</option>
    </select>
</div>
    
  </body>

</html>

answered Dec 20, 2016 at 10:10

Aruna

12k3 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Chethana C Over a year ago

@ Aruna its perfect but why is it not working in my local

Aruna Over a year ago

Don't forget to add the links to the js and css files? <link rel="stylesheet" href="style.css" /> and <script src="script.js"></script>. Its missing in the above snippet. I have updated your plunker link, plnkr.co/edit/irUqK6bkAsuKyRO9ZMc2?p=preview

Chethana C Over a year ago

@ Aruna nope i have added the links but its not working in my local

Aruna Over a year ago

Whatever you tried, can you update the same by editing your question or in the plunker?

Chethana C Over a year ago

@ Aruna <div class="form-group"> <label>Product : </label> <select id="Select" class="form-control" name="productGroup" ng-model="query.productGroup" ng-options="product.productGroup as product.productCode for product in products | filter:{'productGroup':query.productGroup} track by product.productCode"> <option value="">Select Product</option> </select> </div>

|

Mani Kandan · Accepted Answer · 2016-12-20 10:38:43Z

0

state.productGroup as state.productCode for state in ((countries | filter:{'productCode':selectedCountry})) track by state.productCode

edited Dec 20, 2016 at 10:38

answered Dec 20, 2016 at 10:32

Mani Kandan

313 bronze badges

Collectives™ on Stack Overflow

How to use dependent drop down list using AngularJS?

2 Answers 2

17 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related