Question

HTML

<div ng-controller="StaticCtrl">
  <h1>Static - Oriented</h1>
  <p>This approach may be better when you have the entire dataset</p>
<div>
    Country: 
    <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries">
      <option value=''>Select</option>
    </select>
</div>
<div>
    City: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
</div>
<div>
    Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
</div>

AngularJS

function StaticCtrl($scope) {
$scope.countries = {
    'usa': {
        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
        'Los Angeles': ['Burbank', 'Hollywood']
    },
    'canada': {
        'People dont live here': ['igloo', 'cave']
    }
};

}

我没有获得第三次下拉的价值（即下拉式“郊区”）返回索引，而是能够得到前两个下拉列表（“国家”，“城市”）值。帮帮我

jsFiddle http://jsfiddle.net/annavester/Zd6uX/

Answer 1

以下代码正在运作

＆＃13;

 var myapp = angular.module('myapp', []);
        myapp.controller('AjaxCtrl', function ($scope) {
            $scope.countries = ['usa', 'canada', 'mexico', 'france'];
            alert($scope.countries);
            $scope.$watch('country', function (newVal) {
                if (newVal) $scope.cities = ['Los Angeles', 'San Francisco'];
            });
            $scope.$watch('city', function (newVal) {
                if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
            });
        });

  myapp.controller('StaticCtrl', function ($scope) {
                $scope.countries = {
                    'usa': {
                        'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
                        'Los Angeles': ['Burbank', 'Hollywood']
                    },
                    'canada': {
                        'People dont live here': ['igloo', 'cave']
                    }
                };
            });

＆＃13;

 <div ng-controller="AjaxCtrl">
      <h1>AJAX - Oriented</h1>
    <div>
        Country: 
        <select id="country" ng-model="country" ng-options="country for country in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
    </div>
    <div>
        Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>
</div>
  <div ng-controller="StaticCtrl">
      <h1>Static - Oriented</h1>
      <p>This approach may be better when you have the entire dataset</p>
    <div>
        Country: 
        <select id="Select1" ng-model="cities" ng-options="country for (country, cities) in countries">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        City: <select id="Select2" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
    </div>
    <div>
        Suburb: <select id="Select3" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>
  </div>

＆＃13;

当选择时，AngularJS级联下拉列表没有得到最里面的下拉列表值

1 个答案: