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

时间：2016-12-20 10:03:07

标签： javascript html angularjs

我正在研究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"
  }
  ];
 });

让我告诉你吸引人的参考：

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

2 个答案:

答案 0 :(得分：2)

在这里（只需点击下面的Run code snippet ）：

＆＃13;
＆＃13; 
// 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"
  }
  ];
 });
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

state.productGroup as state.productCode for state in（（countries | filter：{'productCode'：selectedCountry}））track by state.productCode

相关问题
最新问题