一、背景分析

1.实现背景

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

2.实现效果

<img src="https://img-blog.csdnimg.cn/20190726010534221.png" width=500 >

二、准备工作

1.查看数据库结构

<img src="https://img-blog.csdnimg.cn/20190726011146761.png" width=500 >

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用法

	用法
写法	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>