一、背景分析
1.1实现背景 - 本篇文章是以品牌关联为案例进行编写实现。可扩展为，只是改变一下数据库字段即可。 省市三级联动，比如 省关联市，市关联县，这是最常见的关联效果
![]()
[h1]二、准备工作[/h1][h2] 2.1 查看数据库结构[/h2]
2.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 } ]
ng-options 指令用于使用 填充 元素的选项。
for item in itemCat1List对itemCat1List 列表中每一项进行遍历，取出每一个item item.id as item.name for item in itemCat1List取出item中的id作为键，取出item中的name作为值。
[h3] 3.2 angularJS中$watch进行认识[/h3]- $watch简介
- AngularJS内部的watch实现了页面随model的及时更新。$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。
- $watch用法
用法写法scope.scope.watch(“监听的model对象”,function (newValue,oldValue){} )含义通过对“监听的model对象”进行监听，若该值发生变化，则变化的值回传给newValue[h1]四、后端Java代码编写[/h1][h2][/h2] 4.1 controller代码展示- @RestController@RequestMapping("/itemCat")public class ItemCatController { @Reference private ItemCatService itemCatService; /** * Description:根据父层id查询下层id */ @RequestMapping("/findByParentId") public List findByParentId(Long parentId){ return itemCatService.findByParentId(parentId); }}
- service接口展示： public List findByParentId(Long parentId); serviceImpl接口展示： @Override public List findByParentId(Long parentId) { //使用criteria查询parentid TbItemCatExample tbItemCatExample = new TbItemCatExample(); Criteria criteria = tbItemCatExample.createCriteria(); criteria.andParentIdEqualTo(parentId); return itemCatMapper.selectByExample(tbItemCatExample); }}
五、前端Html与js代码编写
5.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; } ); })});
- //根据上层父级id查询下级列表 this.findByParentId = function (parentId) { return $http.get('../itemCat/findByParentId.do?parentId='+parentId); }
|
|
转播
