AngularJs实现面包屑导航

版权声明：转载请标明出处 https://blog.csdn.net/keyuzhang/article/details/89286016

1.页面样式

2.html

   <!-- list列表 -->
   <tbody>
	  <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">		      
	          <span ng-if="grade != 3">                          
	              <button type="button" ng-click="setGrade(grade+1);selectList(entity);" class="btn bg-olive btn-xs" >查询下级</button> 		                                     
	          </span>     
	     	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
	      </td>
	  </tr>
   </tbody>

<!-- 面包屑导航 -->
<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>

3.js

	// 定义一个变量记录当前是第几级分类
	$scope.grade = 1;
	
	$scope.setGrade = function(value){
		$scope.grade = value;
	}
	
	$scope.selectList = function(p_entity){
		
		if($scope.grade == 1){
			$scope.entity_1 = null;
			$scope.entity_2 = null;
		}
		if($scope.grade == 2){
			$scope.entity_1 = p_entity;
			$scope.entity_2 = null;
		}
		if($scope.grade == 3){
			$scope.entity_2 = p_entity;
		}
		
		$scope.findByParentId(p_entity.id);
	}