如何使用AngularJS使用依赖下拉列表？答案

【问题标题】：How to use dependent drop down list using AngularJS?如何使用AngularJS使用依赖下拉列表？
【发布时间】：2016-12-20 10:03:06
【问题描述】：

我正在研究 AngularJS。我正在尝试以独立的方式使用下拉列表，但在我的第二个下拉列表中，在我选择第一个下拉列表后，我的数据未定义。请问有人可以帮我吗？

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

让我给你看一下 plunker 以供参考：

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

【问题讨论】：

是否可以更改 JSON 数据？我认为结构可以优化。
@jlast 不，我们不应该改变 json

标签： javascript html angularjs

【解决方案1】：

给你（点击下面的Run code snippet）：

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

【讨论】：

@Aruna 完美，但为什么它在我的本地不起作用
不要忘记添加js和css文件的链接？ <link rel="stylesheet" href="style.css" /> 和 <script src="script.js"></script>。上面的 sn-p 中缺少它。我已经更新了你的 plunker 链接，plnkr.co/edit/irUqK6bkAsuKyRO9ZMc2?p=preview
@Aruna 不，我已经添加了链接，但它在我的本地不起作用
无论您尝试了什么，您可以通过编辑您的问题或在 plunker 中更新相同的内容吗？
@Aruna
产品：

【解决方案2】：

state.productGroup as state.productCode for state in ((countries | filter:{'productCode':selectedCountry})) 由 state.productCode 跟踪

【讨论】：