AngularJS 二级联动

阅读更多

           创建两个下拉列表框分别来填充省份和地区的数据。

	所属省份
	


	所属地区
	

   ng-change下拉列表框发生改变事件，触发listCityByProvince()方法，这个方法查找当前省份下的所有地区，首先定义并且调用一个listProvince()方法来初始化省份的下拉列表框

$scope.listProvince=function(){
	$http({  
		   method:'post',  
		   url:'${ctx}/city/handler/listProvince'  
		   //data:{id:'${provinceId}'}  
	}).then(
		function(resp){  
			//var province=resp['data'];
			$scope['province']=resp['data'];
			$scope.selectedProvince=$scope['province'][0];
			var province=new Object();
			province['id']=$scope.selectedProvince['id'];
			province['name']=$scope.selectedProvince['name'];
			//加载省份下地区列表实现二级联动
			$http({  
				   method:'post',  
				   url:'${ctx}/county/handler/listCityByProvince',  
				   data:province  
			}).then(
				function(resp){  
					//var province=resp['data'];
					$scope['city']=resp['data'];
					$scope.selectedCity=$scope['city'][0];
				}
			);  	
		}
	);  	
};
//声明在调用方法之前
$scope.listProvince();

    下面来定义ng-change事件触发的方法listCityProvince()

//下拉列表改变事件
$scope.listCityByProvince=function(){
	var province=new Object();
	province['id']=$scope.selectedProvince['id'];
	province['name']=$scope.selectedProvince['name'];
	$http({  
		   method:'post',  
		   url:'${ctx}/county/handler/listCityByProvince',  
		   data:province  
	}).then(
		function(resp){  
			//var province=resp['data'];
			$scope['city']=resp['data'];
			$scope.selectedCity=$scope['city'][0];
		}
	);  	
};