黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 5 章 二 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-21 10:05
标题: 【郑州校区】品优购电商系统开发第 5 章 二

【郑州校区】品优购电商系统开发第 5 章 二

1.3 面包屑导航
我们需要返回上级列表，需要通过点击面包屑来实现
修改 itemCatController.js

[AppleScript] 纯文本查看 复制代码

  $scope.grade=1;//默认为 1 级

//设置级别

$scope.setGrade=function(value){

$scope.grade=value;

}

//读取列表

$scope.selectList=function(p_entity){

if($scope.grade==1){//如果为 1 级

$scope.entity_1=null;

$scope.entity_2=null;

}

if($scope.grade==2){//如果为 2 级

$scope.entity_1=p_entity;

$scope.entity_2=null;

}

if($scope.grade==3){//如果为 3 级

$scope.entity_2=p_entity;

}

$scope.findByParentId(p_entity.id);

//查询此级下级列表

}

修改列表的查询下级按钮，设定级别值后 显示列表

[AppleScript] 纯文本查看 复制代码

<span ng-if="grade!=3">

<button type="button" class="btn bg-olive btn-xs"

ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>

</span>

这里我们使用了 ng-if 指令，用于条件判断，当级别不等于 3 的时候才显示“查询下级”按钮
绑定面包屑：

[AppleScript] 纯文本查看 复制代码

<ol class="breadcrumb">

<li><a href="#" ng-click="grade=1;selectList({id:0})">顶级分类列表</a></li>

<li><a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a></li>

 <li><a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>

</ol> 

1.4 新增商品分类（学员实现）
实现商品分类，如下图:


当前显示的是哪一分类的列表，我们就将这个商品分类新增到这个分类下。
实现思路：我们需要一个变量去记住上级 ID，在保存的时候再根据这个 ID 来新增分类
修改 itemCatController.js, 定义变量

[AppleScript] 纯文本查看 复制代码

$scope.parentId=0;//上级 ID 

查询时记录上级 ID

[AppleScript] 纯文本查看 复制代码

//根据上级 ID 显示下级列表

$scope.findByParentId=function(parentId){

$scope.parentId=parentId;//记住上级 ID

itemCatService.findByParentId(parentId).success(

function(response){

$scope.list=response;

}

);

} 

保存的时候，用到此变量

[AppleScript] 纯文本查看 复制代码

//保存

$scope.save=function(){

var serviceObject;//服务层对象

if($scope.entity.id!=null){//如果有 ID

serviceObject=itemCatService.update( $scope.entity ); //修改

}else{

$scope.entity.parentId=$scope.parentId;//赋予上级 ID

serviceObject=itemCatService.add( $scope.entity );//增加

}

serviceObject.success(

function(response){

if(response.success){

//重新查询

$scope.findByParentId($scope.parentId);//重新加载

}else{

alert(response.message);

}

}

);

}

修改页面 item_cat.html

[AppleScript] 纯文本查看 复制代码

<div class="modal-body">

<table class="table table-bordered table-striped" width="800px">

<tr>

<td>上级商品分类</td>

<td>

{{entity_1.name}} >> {{entity_2.name}}

</td>

</tr>

<tr>

<td>商品分类名称</td>

<td><input class="form-control" ng-model="entity.name"

placeholder="商品分类名称"> </td>

</tr>

<tr>

<td>类型模板</td>

<td>

<input ng-model="entity.typeId" placeholder="商品类型模板"

class="form-control" type="text"/>

</td>

</tr>

</table>

</div>

<div class="modal-footer">

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true"

ng-click="save()">保存</button>

<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">

关闭</button>

</div> 

实现类型模板下拉列表的代码略

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2