在角JS我想实现3相关的下拉菜单。用于第二降数据向下基于第一滴加载，并且第三是基于第2次

我在选择后，第一个设置数据传送到第二个下拉菜单有问题。

Plunkr： https://plnkr.co/edit/JMXmT32ljR0yjFL2S347?p=preVIEW

以上样品Plunker是像下面硬codeD数组索引值，而是我想使这个索引值动态根据所选的下拉列表索引。

  conScopeFreqStartDates [0] .frequencies 

和

  conScopeFreqStartDates [0] .frequencies [0] .startDates 

我的HTML code是像下面，

 ＆LT; D​​IV CLASS =COL-MD-2＆GT;  ＆LT;选择类=表格控NG模型=reportType.consolidationScope codeNG-所需=真NG-变化=consolidationScopeChanged（1）＆GT;    ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;    ＆LT;选项NG重复=consolidationScope在conScopeFreqStartDatesVALUE ={{consolidationScope}}＆GT; {{consolidationScope.consolidationScopeLabel}}＆LT; /选项＆GT;  ＆LT; /选择＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS =COL-MD-2＆GT;  ＆LT;选择类=表格控NG模型=reportType.frequency codeNG-所需=真＆GT;    ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;    ＆LT;选项NG重复=在conScopeFreqStartDates频率[0] .frequenciesVALUE ={{frequency.frequency code}}＆GT; {{frequency.frequencyLabel}}＆LT; /选项＆GT;  ＆LT; /选择＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS =COL-MD-2＆GT;  ＆LT;选择类=表格控NG模型=reportType.startDateNG-所需=真＆GT;    ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;    ＆LT;选项NG重复=的startDate在conScopeFreqStartDates [0] .frequencies [0] .startDatesVALUE ={{的startDate}}＆GT; {{}的startDate}＆LT; /选项＆GT;  ＆LT; /选择＆GT;＆LT; / DIV＆GT; 

和JSON数据是这样的，

  [    {        consolidationScopeId：4009，        consolidationScopeLabel：合并，        频率：[            {                频率code：O，                frequencyLabel：特设                startDates：[                    2013年1月1日                ]            }，            {                频率code：Y，                frequencyLabel：年，                startDates：[                    31-12-2016                ]            }        ]    }，    {        consolidationScopeId：4008，        consolidationScopeLabel：个人，        频率：[            {                频率code：O，                frequencyLabel：特设                startDates：[                    2013年1月1日                ]            }，            {                频率code：Y，                frequencyLabel：年，                startDates：[                    31-12-2016                ]            }        ]    }] 

解决方案

这是现在已经实现如下

演示： https://plnkr.co/edit/G25UYk8rfcyjQYPyF1dX?p=preVIEW

的JavaScript

  VAR jayApp = angular.module（'jayApp'，[]）;jayApp.controller（'jayController'，函数（$范围）{  $ scope.conScopeFreqStartDates = [   {      consolidationScopeId：4009，      consolidationScopeLabel：合并，      频率：[         {            频率code：O，            frequencyLabel：1特设            startDates：[               2013年1月1日               2013年2月1日               2013年3月1日            ]         }，         {            频率code：Y，            frequencyLabel：1年，            startDates：[               2013年1月2日               2013年2月2日               2013年3月2日            ]         }      ]   }，   {      consolidationScopeId：4008，      consolidationScopeLabel：个人，      频率：[         {            频率code：O，            frequencyLabel：2特设            startDates：[               2014年1月1日               2014年2月1日               2014年3月1日            ]         }，         {            频率code：Y，            frequencyLabel：2年，            startDates：[               2014年1月2日               2014年2月2日               2014年3月2日            ]         }      ]   }];    //合并范围下拉更改事件    $ scope.consolidationScopeChanged =功能（consScope）{        $ scope.frequencies =;        $ scope.startDates =;        如果（consScope ==未定义）{            返回;        }        VAR consolidationScope = JSON.parse（consScope）;        $ scope.frequencies = consolidationScope.frequencies;// $ scope.reportType.consolidationScope code = consolidationScope.consolidationScope code;    }    //频率下拉更改事件    $ scope.frequencyChanged =功能（频率）{        $ scope.startDates =;        如果（频率==未定义）{            返回;        }//执行console.log（'频率：'+频率）;        VAR频率= JSON.parse（频率）;        $ scope.startDates = frequency.startDates;// $ scope.reportType.frequency code = frequency.frequency code;    }  $ scope.check =功能（数据）{    的console.log（数据+数据）;    的console.log（REPORTTYPE：+ $ scope.reportType.consolidationScope）;//变种DATA2 = JSON.parse（数据）;  }}） 

HTML

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML和GT;  ＆LT; HEAD＆GT;    ＆LT;链路数据需要=bootstrap@3.3.1数据semver =3.3.1的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min的.css/＆GT;    ＆所述;脚本数据需要=jquery@1.11.3数据semver =1.11.3SRC =的https：//$c$c.jquery.com/jquery-1.11.3.min.js＆GT ;＆LT; / SCRIPT＆GT;    ＆所述;脚本数据需要=bootstrap@3.3.1数据semver =3.3.1SRC =// maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js\"> ＆LT; / SCRIPT＆GT;    ＆所述;脚本数据需要=angular.js@1.4.8数据semver =1.4.8SRC =的https：//$c$c.angularjs.org/1.4.8/angular.js＆GT ;＆LT; / SCRIPT＆GT;    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;  ＆LT; /头＆GT;  ＆LT;机身NG-应用=jayAppNG控制器=jayController＆GT;    ＆LT; H3＆GT; AngularJS相关的下拉列表中＆LT; / H3 GT＆;    ＆LT; BR /＆GT;    ＆LT; BR /＆GT;    ＆LT; D​​IV CLASS =COL-MD-2＆GT;      ＆LT;选择类=表格控NG模型=reportType.consolidationScopeNG-所需=真NG-变化=consolidationScopeChanged（reportType.consolidationScope）＆GT;        ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;        ＆LT;选项NG重复=consolidationScope在conScopeFreqStartDatesVALUE ={{consolidationScope}}＆GT; {{consolidationScope.consolidationScopeLabel}}＆LT; /选项＆GT;      ＆LT; /选择＆GT;    ＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =COL-MD-2＆GT;      ＆LT;选择类=表格控NG模型=reportType.frequencyNG-所需=真NG-变化=frequencyChanged（reportType.frequency）＆GT;        ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;        ＆LT;选项NG重复=频率频率值={{频率}}＆GT; {{frequency.frequencyLabel}}＆LT; /选项＆GT;      ＆LT; /选择＆GT;    ＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =COL-MD-2＆GT;      ＆LT;选择类=表格控NG模型=reportType.startDateNG-所需=真＆GT;        ＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;        ＆LT;选项NG重复=的startDate在startDatesVALUE ={{的startDate}}＆GT; {{}的startDate}＆LT; /选项＆GT;      ＆LT; /选择＆GT;    ＆LT; / DIV＆GT;    ＆LT; BR＆GT;    ＆LT;按钮式=按钮级=BTN BTN-主要                            NG-点击=检查（REPORTTYPE）＆GT;提交＆LT; /按钮＆GT;  ＆LT; /身体GT;＆LT; / HTML＆GT; 

In Angular JS I am trying to implement 3 dependent drop downs. The data for the second drop down is loaded based on the first drop and the 3rd is based on 2nd.

I am having problem in setting the data to the second dropdown after choosing first one.

Plunkr : https://plnkr.co/edit/JMXmT32ljR0yjFL2S347?p=preview

The above sample Plunker is with hard coded array index values like below, but instead I want to make this index value dynamic according to the selected dropdown index.

conScopeFreqStartDates[0].frequencies

and

conScopeFreqStartDates[0].frequencies[0].startDates

My HTML code is like below,

<div class="col-md-2">
  <select class="form-control" ng-model="reportType.consolidationScopeCode" ng-required="true" ng-change="consolidationScopeChanged(1)">
    <option value="">Please select</option>
    <option ng-repeat="consolidationScope in conScopeFreqStartDates" value="{{consolidationScope}}">{{consolidationScope.consolidationScopeLabel}}</option>
  </select>
</div>
<div class="col-md-2">
  <select class="form-control" ng-model="reportType.frequencyCode" ng-required="true">
    <option value="">Please select</option>
    <option ng-repeat="frequency in conScopeFreqStartDates[0].frequencies" value="{{frequency.frequencyCode}}">{{frequency.frequencyLabel}}</option>
  </select>
</div>
<div class="col-md-2">
  <select class="form-control" ng-model="reportType.startDate" ng-required="true">
    <option value="">Please select</option>
    <option ng-repeat="startDate in conScopeFreqStartDates[0].frequencies[0].startDates" value="{{startDate}}">{{startDate}}</option>
  </select>
</div>

And JSON data is like this,

[
    {
        "consolidationScopeId": 4009,
        "consolidationScopeLabel": "Consolidated",
        "frequencies": [
            {
                "frequencyCode": "O",
                "frequencyLabel": "Ad Hoc",
                "startDates": [
                    "01-01-2013"
                ]
            },
            {
                "frequencyCode": "Y",
                "frequencyLabel": "Annual",
                "startDates": [
                    "31-12-2016"
                ]
            }
        ]
    },
    {
        "consolidationScopeId": 4008,
        "consolidationScopeLabel": "Individual",
        "frequencies": [
            {
                "frequencyCode": "O",
                "frequencyLabel": "Ad Hoc",
                "startDates": [
                    "01-01-2013"
                ]
            },
            {
                "frequencyCode": "Y",
                "frequencyLabel": "Annual",
                "startDates": [
                    "31-12-2016"
                ]
            }
        ]
    }
]

This is now implemented as below

Demo : https://plnkr.co/edit/G25UYk8rfcyjQYPyF1dX?p=preview

Javascript

var jayApp = angular.module('jayApp', []);



jayApp.controller('jayController', function($scope) {

  $scope.conScopeFreqStartDates =    [
   {
      "consolidationScopeId": 4009,
      "consolidationScopeLabel": "Consolidated",
      "frequencies": [
         {
            "frequencyCode": "O",
            "frequencyLabel": "1 Ad Hoc",
            "startDates": [
               "01-01-2013",
               "02-01-2013",
               "03-01-2013"
            ]
         },
         {
            "frequencyCode": "Y",
            "frequencyLabel": "1 Annual",
            "startDates": [
               "01-2-2013",
               "02-2-2013",
               "03-2-2013"
            ]
         }
      ]
   },
   {
      "consolidationScopeId": 4008,
      "consolidationScopeLabel": "Individual",
      "frequencies": [
         {
            "frequencyCode": "O",
            "frequencyLabel": "2 Ad Hoc",
            "startDates": [
               "01-01-2014",
               "02-01-2014",
               "03-01-2014"
            ]
         },
         {
            "frequencyCode": "Y",
            "frequencyLabel": "2 Annual",
            "startDates": [
               "01-02-2014",
               "02-02-2014",
               "03-02-2014"
            ]
         }
      ]
   }
];


    // Consolidation scope drop down change event
    $scope.consolidationScopeChanged = function(consScope) {

        $scope.frequencies = "";
        $scope.startDates = "";

        if(consScope == undefined) {
            return;
        }

        var consolidationScope = JSON.parse(consScope);
        $scope.frequencies = consolidationScope.frequencies;

//      $scope.reportType.consolidationScopeCode = consolidationScope.consolidationScopeCode;
    }

    // Frequencies drop down change event
    $scope.frequencyChanged = function(freq) {

        $scope.startDates = "";

        if(freq == undefined) {
            return;         
        }
//      console.log('freq : ' +freq);

        var frequency = JSON.parse(freq);
        $scope.startDates = frequency.startDates;

//      $scope.reportType.frequencyCode = frequency.frequencyCode; 
    }


  $scope.check = function(data) {
    console.log("data : " +data);
    console.log("reportType : " +$scope.reportType.consolidationScope);

//    var data2 = JSON.parse(data);

  }

})

HTML

    <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="jayApp" ng-controller="jayController">
    <h3>AngularJS Dependent dropdowns </h3>
    <br />
    <br />
    <div class="col-md-2">
      <select class="form-control" ng-model="reportType.consolidationScope" ng-required="true" ng-change="consolidationScopeChanged(reportType.consolidationScope)">
        <option value="">Please select</option>
        <option ng-repeat="consolidationScope in conScopeFreqStartDates" value="{{consolidationScope}}">{{consolidationScope.consolidationScopeLabel}}</option>
      </select>
    </div>
    <div class="col-md-2">
      <select class="form-control" ng-model="reportType.frequency" ng-required="true" ng-change="frequencyChanged(reportType.frequency)">
        <option value="">Please select</option>
        <option ng-repeat="frequency in frequencies" value="{{frequency}}">{{frequency.frequencyLabel}}</option>
      </select>
    </div>
    <div class="col-md-2">
      <select class="form-control" ng-model="reportType.startDate" ng-required="true">
        <option value="">Please select</option>
        <option ng-repeat="startDate in startDates" value="{{startDate}}">{{startDate}}</option>
      </select>
    </div>
    <br>

    <button type="button" class="btn btn-primary"
                            ng-click="check(reportType)">Submit</button>
  </body>

</html>