创建两个下拉列表框分别来填充省份和地区的数据。
<div class="form-group">
<label for="province">所属省份</label>
<select name="province" id="province" class="form-control" ng-model="selectedProvince" ng-options="x['name'] for x in province" ng-change="listCityByProvince()"></select>
</div>
<div class="form-group">
<label for="city">所属地区</label>
<select name="city" id="city" class="form-control" ng-model="selectedCity" ng-options="x['cityName'] for x in city"></select>
</div>
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];
}
);
};