AngularJS（1） 使用 select2 和 ng-options 实现三级联动下拉效果

一、背景分析

1.实现背景

本篇文章是以品牌关联为案例进行编写实现。
可扩展为，只是改变一下数据库字段即可。
	省市三级联动，比如 省关联市，市关联县，这是最常见的关联效果

2.实现效果

二、准备工作

1.查看数据库结构

2.查看后端代码返回数据格式（json）

parentId：当parentId为0时，为第一级标题
		  代表当前类别属于哪个分类

一级标签：
	[
	 {
	    "id": 74,
	    "name": "家用电器",
	    "parentId": 0,
	    "typeId": 35
	  }
	]
二级标签：
	[
	  {
	    "id": 75,
	    "name": "大家电",
	    "parentId": 74,
	    "typeId": 35
	  }
	]
三级标题：
    [
      {
        "id": 76,
        "name": "平板电视",
        "parentId": 75,
        "typeId": 37
      },
      {
        "id": 77,
        "name": "空调",
        "parentId": 75,
        "typeId": 35
      },
      { 
        "id": 78,
        "name": "冰箱",
        "parentId": 75,
        "typeId": 35
      }
    ]    

3.准备工作，引入angularJs等插件

    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/angularjs/angular.min.js"></script>

4.对ng-options了解，及angularJS中$watch方法了解

4.1 ng-options书写规范与含义

ng-options 指令用于使用 <options> 填充 <select> 元素的选项。

for item in itemCat1List
对itemCat1List 列表中每一项进行遍历，取出每一个item

item.id as item.name for item in itemCat1List
取出item中的id作为键，取出item中的name作为值。

上述为填充<select>中每一个 <options>的过程

4.2 angularJS中$watch进行认识

1. $watch简介

   AngularJS内部的watch实现了页面随model的及时更新。
   $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
   

2. $watch用法

	用法
写法	$scope.$watch(“监听的model对象”,function (newValue,oldValue){} )
含义	通过对“监听的model对象”进行监听，若该值发生变化，则变化的值回传给newValue

三、编写代码

1.后端Java代码编写

1. controller代码展示

	@RestController
	@RequestMapping("/itemCat")
	public class ItemCatController {
	
		@Reference
		private ItemCatService itemCatService;
		
		/**
		 * Description:根据父层id查询下层id
		 */
		@RequestMapping("/findByParentId")
		public List<TbItemCat> findByParentId(Long parentId){
			return itemCatService.findByParentId(parentId);
		}
	}

2. service接口及实现类代码展示

	service接口展示：
		public List<TbItemCat> findByParentId(Long parentId);
		
	serviceImpl接口展示：
		@Override
		public List<TbItemCat> findByParentId(Long parentId) {
			//使用criteria查询parentid
			TbItemCatExample tbItemCatExample = new TbItemCatExample();
			Criteria criteria =  tbItemCatExample.createCriteria();
			criteria.andParentIdEqualTo(parentId);
	
			return itemCatMapper.selectByExample(tbItemCatExample);
		}
}

3. dao使用mybatis实现

2.前段Html与js代码编写

1. controller层js代码展示

app.controller('goodsController' ,function($scope,$controller,goodsService,uploadImageService,itemCatService){
	
	//第一级查询第一类商品信息
	$scope.selectItemCat1List=function(){

		itemCatService.findByParentId(0).success(
			function(response){
				$scope.itemCat1List=response;
			}
		);
	}

	//第二级 查询第一类商品下的二级商品信息
	//解决问题： 需要获取一级商品id并且传给findByParentId作为父级id
	
	$scope.$watch("entity.goods.category1Id",function (newValue,oldValue) {
		itemCatService.findByParentId(newValue).success(
			function (response) {
				$scope.itemCat2List = response;
		});
	})

	//第三级 查询第二类下的二级商品信息	* 解决方法类似与上面方法
	$scope.$watch("entity.goods.category2Id",function (newValue,oldValue) {
		itemCatService.findByParentId(newValue).success(
			function (response) {
				$scope.itemCat3List = response;
			}
		);
	})
});	

2. service层js代码展示

	//根据上层父级id查询下级列表
	this.findByParentId = function (parentId) {
		return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
	}

3. html代码展示

<tr>
   <td>
         <select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>
     </td>
     <td>
         <select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>
     </td>
     <td>
         <select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>
     </td>
 </tr>