本帖最后由 谷粒姐姐 于 2018-8-20 11:48 编辑
商品录入【选择商品分类】 1.1 需求分析 在商品录入界面实现商品分类的选择(三级分类)效果如下:
当用户选择一级分类后,二级分类列表要相应更新,当用户选择二级分类后,三级列表要相应更新。
1.2 准备工作 (1)在 pinyougou-shop-web 工程中创建 ItemCatController.(可拷贝运营商后台的代码)
(2)创建 item_catService.js (可拷贝运营商后台的代码) (3)修改 goodsController.js,引入 itemCatService
(4)修改 goods_edit.html,添加引用 [AppleScript] 纯文本查看 复制代码 <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> [AppleScript] 纯文本查看 复制代码 <script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>
1.1 代码实现 1.1.1 一级分类下拉选择框 在 goodsController 增加代码 [AppleScript] 纯文本查看 复制代码 //读取一级分类
$scope.selectItemCat1List=function(){ itemCatService.findByParentId(0).success(
function(response){
$scope.itemCat1List=response;
}
);
} 页面加载调用该方法 修改 goods_edit.html 一级分类下拉选择框 [AppleScript] 纯文本查看 复制代码 <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 提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。 运行效果如下:
|