本文共 2499 字，大约阅读时间需要 8 分钟。
1.商品录入【选择商品分类】
1.1需求分析
在商品录入界面实现商品分类的选择（三级分类）效果如下：
当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。
1.2准备工作
（1）在mall-seller-web工程中创建ItemCatController.java（可拷贝运营商后台的代码）
（2）创建item_catService.js （可拷贝运营商后台的代码）
（3）修改goodsController.js，引入itemCatService
（4）修改goods_edit.html，添加引用
| <script type="text/javascript" src="../js/base.js"></script> <script type="text/javascript" src="../js/service/goodsService.js"></script> <script type="text/javascript" src="../js/service/itemCatService.js"></script> <script type="text/javascript" src="../js/controller/baseController.js"></script> <script type="text/javascript" src="../js/controller/goodsController.js"></script> |
1.3代码实现
1.3.1一级分类下拉选择框
在goodsController.js增加代码
| //读取一级分类 $scope.selectItemCat1List=function(){ itemCatService.findByParentId(0).success( function(response){ $scope.itemCat1List=response; } ); } |
页面加载调用该方法
| <body class="hold-transition skin-red sidebar-mini" ng-app="mall" ng-controller="goodsController" ng-init="selectItemCat1List()"> |
修改goods_edit.html一级分类下拉选择框
| <select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select> |
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
运行效果如下：
1.3.2二级分类下拉选择框
在goodsController.js增加代码：
| //读取二级分类 $scope.$watch('entity.goods.category1Id', function(newValue, oldValue) { //根据选择的值，查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat2List=response; } ); }); |
$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
修改goods_edit.html中二级分类下拉框
| <select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select> |
1.3.3三级分类下拉选择框
在goodsController.js增加代码：
| //读取三级分类 $scope.$watch('entity.goods.category2Id', function(newValue, oldValue) { //根据选择的值，查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat3List=response; } ); }); |
修改goods_edit.html中三级分类下拉框
| <select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select> |
1.3.4读取模板ID
在goodsController.js增加代码：
| //三级分类选择后 读取模板ID $scope.$watch('entity.goods.category3Id', function(newValue, oldValue) { itemCatService.findOne(newValue).success( function(response){ $scope.entity.goods.typeTemplateId=response.typeId; //更新模板ID } ); }); |
在goods_edit.html显示模板ID
| 模板ID:{ {entity.goods.typeTemplateId}} |