1. 程式人生 > >angularjs麵包屑導航

angularjs麵包屑導航

angularjs麵包屑導航

頁面顯示

<li>
		 //點選促發setGrade();將0賦值給grade,此時grade=0;$scope.grade=2;
	     <a href="#" ng-click="setGrade(0,null);findParentId(0)" >頂級分類列表</a> 
</li>
<li>
	  //點選促發setGrade();將1賦值給grade,此時grade=1;$scope.grade=3;
	   <a href="#" ng-click="setGrade(1,cat_1);findParentId(cat_1.id)">{{cat_1.name}}</a>
</li>
<li>
		//點選促發setGrade();將2賦值給grade,此時grade=2;$scope.grade=4;
	   <a href="#" ng-click="setGrade(2,cat_2);findParentId(cat_2.id)">{{cat_2.name}}</a>
</li>
 <tbody>
      <tr ng-repeat="category in list">
            <td><input  type="checkbox" ></td>			                              
            <td>{{category.parentId}}</td>
      		<td>{{category.name}}</td>									    
     		 <td>
				{{category.typeId}}    
      		</td>									      
           <td class="text-center">	
			//grade是angularjs的grade,當到第二層就隱藏該按鈕
			//點選查詢下級時將該tr的資料傳入方法
		  		<span ng-if="grade<3">
					<button type="button" class="btn bg-olive btn-xs" ng-	click="setGrade(grade,category);findParentId(category.id)">查詢下級</button> 		                                     
		 		</span>	                                     
	     			<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
	      	</td>
		</tr>
</tbody>

Controller.js

$scope.findParentId=function(id){
	 $http.get('/findParentId?id='+id).success(function(response){
		$scope.list=response;
	});
}

//定義等級
該grade是angularjs的grade,只是為了記錄層數
$scope.grade=1;

//引數grade是普通引數
//category是點選的每一行資料
$scope.setGrade=function(grade,category){

	//angularjs的grade記錄一層
	$scope.grade=grade+1;
	
	if(grade==0){
		$scope.cat_1=null;
		$scope.cat_2=null;
	}
	
	if(grade==1){
		$scope.cat_1=category;
		$scope.cat_2=null;
	}
	if(grade==2){
		$scope.cat_2=category;

	}
}