Question

在Angular JS中，我试图实现3个依赖的下拉。第二个下拉列表的数据基于第一个下降加载，第三个下拉的数据基于第二个。

我在选择第一个数据后将数据设置为第二个下拉列表时遇到问题。

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

以上示例Plunker具有如下所示的硬编码数组索引值，但我想根据所选的下拉索引使此索引值动态化。

conScopeFreqStartDates[0].frequencies

和

conScopeFreqStartDates[0].frequencies[0].startDates

我的HTML代码如下所示，

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

JSON数据就像这样，

[
    {
        "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"
                ]
            }
        ]
    }
]

Answer 1

现在实现如下

演示：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>

Answer 2

<div ng-app="app" ng-controller="CountryController">
    <div class="form-group">
        Country:
        <select id="country" ng-model="states" ng-options="country for (country, states) in countries">
            <option value=''>Select</option>
        </select>
    </div>

    <div>
        States:
        <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
          <option value=''>Select</option>
        </select>
    </div>

    <div>
        City:
        <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities">
          <option value=''>Select</option>
        </select>
    </div>
</div>

JS文件：

var app = angular.module('app', []);
app.controller('CountryController', function($scope) {
    $scope.countries = {
        'India': {
            'Gujarat': ['amreli','anand','surat','mahesana'],
            'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'],
            'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'],  
            'Maharashtra': ['Mumba','thane','vasai']
        },
        'USA': {
          'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
          'Los Angeles': ['Burbank', 'Hollywood'],
          'California': ['Salinas','Redding']
        },
        'Australia': {
            'New South Wales': ['Sydney','Orange','Broken Hill'],
            'Victoria': ['Benalla','Melbourne']
        }
    };
});

Angular JS - 依赖性下降（3）

2 个答案: