angularjs中select2的使用和三级联动展示下拉框

select2的使用:

页面引入seleck2的css样式和js文件:

<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

页面上标签写法:

//select2-model : 向后台传输的数据 ;
//config : 下拉列表要展示的数据 ;
<input select2 select2-model="entity.brandIds" config="brindList" placeholder="选择品牌（可多选）" multiple class="form-control" type="text"

js配置:

//select2中数据的展示格式为{ data : [{"id":xx,"text":"xxx"},{"id":xx,"text":"xxx"}]}
$scope.brindList = { data: [] };//定义对象,如果不定义,页面展示的时候会报错 : 该字段未定义
$scope.specList = { data: [] };//定义对象
	//查询模板
	$scope.findTypeTemplate = function () {
		typeTemplateService.findtypeTemplate().success(
			function (response) {
				$scope.brindList.data = response.brandIds;
				$scope.specList.data = response.specIds;
			}
		);
	}

三级联动展示下拉框:

页面标签:

//ng-options : angularjs指令,可以循环展示下拉框;item.id是值 ,item.name是要展示的文本
//当用户点击选中下拉框中的某个文本时,会将该文本的值(也就是item.id)传给你ng-model里绑定的变量;
<td>
	<!-- item.id是值  item.name是要展示的文本-->
	<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCatList1">
	</select>
</td>

<td>
	<select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCatList2"></select>
</td>

<td>
	<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCatList3"></select>
</td>

前端service.js代码:

//服务层
app.service('itemCatService', function ($http) {
	//根据参数id查询目录
	this.findAllByParentId = function (parentId) {
		return $http.post("../itemCat/findAllByParentId.do?parentId=" + parentId);
	}
});

前端controller代码:

//控制层 
app.controller('goodsController', function ($scope, goodsService, uploadService, itemCatService, typeTemplateService) {

	//页面初始化时传一个写死的id,调用此方法展示一级目录 ( 因为一级目录不需要用户去点击调用,可以				直接展示在下拉框)
	$scope.selectList = function (parentId) {
		itemCatService.findAllByParentId(parentId).success(
			function (response) {
				$scope.itemCatList1 = response;
			}
		);
	}

	//$scope.$watch监控变量,当你选择监控的变量("entity.goods.category1Id")发生改变时执行此方法(会携带两个参数传递过来,newValue为变量改变之后的值(也就是用户选中之后的值))
	$scope.itemCatList2 = [];//定义对象,如果不定义,页面展示的时候可能会报错 : 该字段未定义
	//$scope.$watch监控变量: 当你选择监控的变量(entity.goods.category1Id)改变时执行,查询二级目录
	$scope.$watch("entity.goods.category1Id", function (newValue, oldValue) {
		itemCatService.findAllByParentId(newValue).success(
			function (response) {
				$scope.itemCatList2 = response;
			}
		);
	})

	$scope.itemCatList3 = [];//定义对象,如果不定义,页面展示的时候可能会报错 : 该字段未定义
	//$scope.$watch监控变量: 当你选择监控的变量(entity.goods.category2Id)改变时执行,查询三级目录
	$scope.$watch("entity.goods.category2Id", function (newValue, oldValue) {
		itemCatService.findAllByParentId(newValue).success(
			function (response) {
				$scope.itemCatList3 = response;
			}
		);
	})
});