黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day05（2） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-8-14 15:52
标题: 【郑州校区】Java之品优购课程讲义_day05（2）

1.2.1 前端代码

（1）修改 itemCatService.js

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

//根据上级 ID 查询下级列表

this.findByParentId=function(parentId){





return  $http.get('../itemCat/findByParentId.do?parentId='+parentId);





}

（2）修改 itemCatController.js

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

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



$scope.findByParentId=function(parentId){ itemCatService.findByParentId(parentId).success(

function(response){





$scope.list=response;





}





);





}

（3）修改 item_cat.html

引入 JS

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

<tr  ng-repeat="entity  in  list">



<td><input  type="checkbox"  ></td>



<td>{{entity.id}}</td>



<td>{{entity.name}}</td>



<td>{{entity.typeId}}</td>



<td  class="text-center">



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

ng-click="findByParentId(entity.id)">查询下级</button>



<button  type="button"  class="btn  bg-olive  btn-xs"  data-toggle="modal" data-target="#editModal"  >修改</button>



</td>



</tr>

1.2 面包屑导航

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

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

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



//设置级别



$scope.setGrade=function(value){





$scope.grade=value;





}



//读取列表



$scope.selectList=function(p_entity){

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

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>

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

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



</ol>

---

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

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