品优购电商系统开发第 5 章 二

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

$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);
//查询此级下级列表
}

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

<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 指令,用于条件判断,当级别不等于 的时候才显示“查询下级”按
绑定面包屑:

<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, 定义变量

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

查询时记录上级 ID

//根据上级 ID 显示下级列表
$scope.findByParentId=function(parentId){
$scope.parentId=parentId;//记住上级 ID
itemCatService.findByParentId(parentId).success(
function(response){
$scope.list=response;
}
);
}

保存的时候,用到此变量

//保存
$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

<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>

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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读