angularjs中select2的使用和三級關聯展示下拉框

angularjs中下拉框展示和對頁面變量監控的使用

• • **select2的使用:**
  • 三級關聯展示下拉框:

select2的使用:

頁面引入seleck2的css樣式和js檔案:

<link rel="stylesheet" href="../plugins/select2/select2.css" target="_blank" rel="external nofollow"  />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" target="_blank" rel="external nofollow"  />
<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;
			}
		);
	})
});