javascript - 级联下拉AngularJS ng-option对象错误

Question

我用过这个例子http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/这里它工作正常，但我获取带有索引号的对象而不是获取值

我的 Controller '使用严格';

/**
* @ngdoc object
* @name test.Controllers.TestController
* @description TestController
* @requires ng.$scope
*/

angular
.module('test')
.controller('TestController', [
    '$scope',
    function($scope) {
        $scope.countries = {
            'India': {
                'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
            },
            'USA': {
                'Alabama': ['Montgomery', 'Birmingham'],
                'California': ['Sacramento', 'Fremont'],
                'Illinois': ['Springfield', 'Chicago']
            },
            'Australia': {
                'New South Wales': ['Sydney'],
                'Victoria': ['Melbourne']
            }
        };
        $scope.GetSelectedCountry = function () {
            $scope.strCountry = document.getElementById("country").value;
            var datas =$scope.strCountry;
            console.log(JSON.stringify(datas));
        };
        $scope.GetSelectedState = function () {
            $scope.strState = document.getElementById("state").value;
        };



    }
]);

我的查看页面

国家: 选择 状态:选择 城市: 选择 {{城市}} 所选国家: {{str国家}} 所选状态: {{strState}} 所选城市: {{城市}}

Answer 1

如果您只想获取选定的国家和州，可以迭代该对象并检查哪个键与 ng-model 的值匹配。要获取城市，只需返回 ng-model 的值即可。

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
        $scope.countries = {
          'India': {
            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
          },
          'USA': {
            'Alabama': ['Montgomery', 'Birmingham'],
            'California': ['Sacramento', 'Fremont'],
            'Illinois': ['Springfield', 'Chicago']
          },
          'Australia': {
            'New South Wales': ['Sydney'],
            'Victoria': ['Melbourne']
          }
        };

        $scope.getCountry = function(val) {
          for (var key in $scope.countries) {
            if ($scope.countries.hasOwnProperty(key)) {
              if ($scope.countries[key] === val) {
                alert('You selected: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                alert('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          alert('You selected ' + city);
        };
  }]);

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)">
        <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" ng-change="getCity(cities, states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
        <option value=''>Select</option>
        <option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
      </select>
    </div>
  </div>
</div>