创建两个下拉列表框分别来填充省份和地区的数据。
<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]; } ); };