这里我附上了示例代码.i已经为国家,州,城市做了级联下拉列表。但它不适用于我http://jsfiddle.net/sreemohan143/U3pVM/17790/我创建变量并像$ scope一样传递它不显示值。
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.states='India';
$scope.cities='Maharashtra';
$scope.city='Mumbai';
//$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);
};
}]);
<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>