angularJS中的级联查询

前台页面

<body class="hold-transition skin-red sidebar-mini" ng-app="hahahaha" ng-controller="placeController" ng-init="selectProvinceList()">

	<!--表单内容-->
	<div class="tab-pane active" id="home">
		<div class="row data-type">                                  
		   <div class="col-md-2 title"> 省 / 市 / 区</div>
				<table>
					<tr>
						<td>
							<select class="form-control" ng-model="entity.places.provinceId" ng-options="place.id as place.name for place in provinceList" ></select>
						</td>
						<td>
							<select class="form-control select-sm" ng-model="entity.places.cityId" ng-options="place.id as place.name for place in cityList"></select>
						</td>
						<td>
							<select class="form-control select-sm" ng-model="entity.places.areaId" ng-options="place.id as place.name for place in areaList"></select>
						</td>
					</tr>
				</table>
		</div>
	</div>
	
</body>

placeController层

//控制层 
app.controller('placeController', function($scope, $controller, placeService){	
	
	//三级联查
	//一级分类
	$scope.selectProvinceList=function(){
		placeService.findByParentId(0).success(
			function(response){
				$scope.provinceList = response;
			}
		);
	}
	
	//根据一级id查询二级分类
	$scope.$watch('entity.place.provinceId',function(newvalue, oldValue){
		placeService.findByParentId(newvalue).success(
			function(response){
				$scope.cityList = response;
			}
		);
	});
	
	//根据二级id查询三级分类
	$scope.$watch('entity.place.cityId',function(newvalue, oldValue){
		placeService.findByParentId(newvalue).success(
			function(response){
				$scope.areaList = response;
			}
		);
	});
    
});

placeService层

//服务层
app.service('itemCatService',function($http){
  
	//根据上级分类id查询下级分类列表
	this.findByParentId=function(parentId){
		return $http.get('../place/findByParentId.do?parentId='+parentId);
	}
	
});

后台控制层

@RestController
@RequestMapping("/place")
public class placeController {

	@Reference
	private IPlaceService placeService;
	
	@RequestMapping("/findByParentId")
	public List<Place> findByParentId(Integer parentId) {
		return placeService.findByParentId(parentId);
	}
	
}

angularJS中的级联查询

猜你喜欢