Angular JS-依赖下拉列表(3）

Angular JS - Dependent drop downs (3)

本文关键字：下拉列表 JS- 依赖 Angular      更新时间：2023-09-26

在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"
                ]
            }
        ]
    }
]

现在实现如下

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

<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']
        }
    };
});
相关文章：