級聯下拉angularjs ng-option對象錯誤

Question

我已經使用了這個例子http://devzone.co.in/simple-example-of-dependable-dropdowns-cascading-dropdowns-using-angularjs/在這里工作正常，但是我用索引號而不是獲取值來獲取對象

我的控制器“使用嚴格”；

/**
* @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;
        };



    }
]);

我的查看頁面

國家：選擇州：選擇城市：選擇{{city}}選擇國家：{{strCountry}}選擇州：{{strState}}選擇城市：{{city}}

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>