angularjs三级联动
html
<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="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> </div>
js
function AjaxCtrl($scope) { $scope.countries = ['usa', 'canada', 'mexico', 'france']; $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']; }); } function StaticCtrl($scope) { $scope.countries = { 'usa': { 'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 'Los Angeles': ['Burbank', 'Hollywood'] }, 'canada': { 'People dont live here': ['igloo', 'cave'] } }; }
参考:http://jsfiddle.net/annavester/Zd6uX/