面包屑的用法_面包屑怎么提示可以点-CSDN博客

本文链接：https://blog.csdn.net/qq_42588782/article/details/97412034

本文介绍如何使用AngularJS实现面包屑导航功能，通过集合存储面包屑信息，动态添加和删除，实现层级展示和下级数据查询。涉及AngularJS服务层、控制器层交互及页面调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先进行分析

面包屑是可长可短，所以我们选择用集合来存储面包屑信息。当查询下级的时候，要添加面包屑。
当点面包屑，要展示所点击的面包屑下级数据，并且，面包只显示到当前层级。要结面包屑集合的数据进行删除。

是使用angular.min.js实现的

  导入依赖
  angular.min.js的js文件
  <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
//js三层中的Service层
<script type="text/javascript" src="../js/service/itemCatService.js"></script>
//分页里面的公共代码
<script type="text/javascript" src="../js/controller/baseController.js"></script>
//  js三层中的Controlle层
<script type="text/javascript" src="../js/controller/itemCatController.js"></script>

在itemCatService.js层与后台的Controller进行交互

//查询
this.findByParentId=function(parentId){
return $http.get(’…/itemCat/findByParentId.do?parentId=’+parentId);
}

在itemCatController.js层中创建顶级分类列表

后台查找的sql语句就不写了

//查询某一级的分类
$scope.findByParentId=function(parentId){				
	itemCatService.findByParentId(parentId).success(
		function(response){
			$scope.list=response;					
		}
	);				
}
$scope.ListItem = [{id:0,name:"顶级分类列表"}];

页面上的调用

在查询下级的按钮上添加：mbxList.push(obj)
用户每点击一次就就将这一行的元素加入到集合中
			<button type="button" class="btn bg-olive btn-xs" 
				ng-if="mbxList.length<3"
				ng-click="getData(obj.id);mbxList.push(obj)">查询下级</button>

然后在到集合中显示出来

在面包屑的展示上，添加ng-click=“查询数据方法;mbxList.length=$index+1”

		//循环遍历  取出里面的名字   
<li ng-repeat="mbx in mbxList">
	   <a href="#" ng-click="findByParentId(mbx.id);mbxList.length=$index+1" >{{mbx.name}}</a> 
</li>