一、服务层代码
// 根据上级 ID 查询下级列表
this.findByParentId = function(parentId) {
return $http.get("/itemCat/findByParentId?parentId=" + parentId);
};
// 通过id查询商品分类的方法
this.selectOne = function(id) {
return $http.get("/itemCat/findOne?id= " + id);
};
二、控制层方法
/**
监控对象属性数据变化的服务
$scope.$watch('entity.tbGoods.category1Id', function(newValue, oldValue) {
});
*/
// 查询商品分类一级目录
$scope.selectItemCat1List = function() {
itemCatService.findByParentId(0).success(function(data) {
//赋值给一级目录
$scope.itemCat1List = data;
})
};
// 查询商品分类二级目录（通过监控1级目录变化）
$scope.$watch('entity.tbGoods.category1Id', function(newValue, oldValue) {
//查询2级目录
itemCatService.findByParentId(newValue).success(function(data) {
//赋值给二级目录
$scope.itemCat2List = data;
})
});
// 查询商品分类三级目录（通过监控2级目录变化）
$scope.$watch('entity.tbGoods.category2Id', function(newValue, oldValue) {
itemCatService.findByParentId(newValue).success(function(data) {
//赋值给三级目录
$scope.itemCat3List = data;
})
});
// 监控三级分类选择后 读取模板 ID
$scope.$watch('entity.tbGoods.category3Id', function(newValue, oldValue) {
itemCatService.selectOne(newValue).success(function(data) {
// 更新模板 ID
$scope.entity.tbGoods.typeTemplateId = data.typeId;
});
});
//一级目录内容变化，清空三级目录和对应模版id
$scope.clearCate3=function(){
//清空模版数据
$scope.entity.tbGoods.typeTemplateId=''
//情况3级目录
$scope.itemCat3List = '';
};
//二级目录内容变化，清空模版id
$scope.clearTemplate=function(){
//清空模版数据
$scope.entity.tbGoods.typeTemplateId='';
};
三、html页面代码
页面加载，初始化一级目录
<body ng-app="shop" ng-controller="goodsController"
ng-init="selectItemCat1List();"
>ng-option监控目录变化
<!--
1、当页面初始化时，通过上述ng-init调用对应方法，查询出一级目录赋值给itemCat1List
2、ng-options: item.id as item.name for item in itemCat1List：
当itemCat1List数组有值时，ng-options通过配置
item.id：将数组中每个对象的id--》赋值给下拉框option选项value属性
item.name：将数组中每个对象的name属性--》赋值给option的html代码块儿
3、ng-model： 数据双向绑定，一级选项卡被选定后，
ng-model通过数据的双向绑定，将数据绑定到商品的一级分类属性category1Id上
4、此时控制层监控方法：
$scope.$watch('entity.tbGoods.category1Id',function(newValue, oldValue){})
监控到商品一级分类属性数据被选定时（entity.tbGoods.category1Id）
5、监控到数据变化后，执行其内部的代码执行代码：
查出二级分类列表,赋值2级分类列表itemCat2List
6、itemCat2List有数据后，第二个选项卡的
ng-options="item.id as item.name for item in itemCat2List"
ng-options，将二级分类列表中的所有数据 中的
id：赋值给下拉框option选项value属性
name：赋值给option的html代码块儿
7、当二级分类被选中后，通过2级分类的ng-model绑定数据，
依次调用查询出三级列表
-->
<tr>
<td>
<select
ng-model="entity.tbGoods.category1Id"
ng-change="clearCate3()"
ng-options="item.id as item.name for item in itemCat1List"
class="form-control">
</select>
</td>
<td>
<select ng-model="entity.tbGoods.category2Id"
ng-change="clearTemplate()"
ng-options="item.id as item.name for item in itemCat2List"
class="form-control select-sm">
</select>
</td>
<td>
<select ng-model="entity.tbGoods.category3Id"
ng-options="item.id as item.name for item in itemCat3List"
class="form-control select-sm">
</select>
</td>
<td>模板ID:{{entity.tbGoods.typeTemplateId}}</td>
</tr>