AngularJS中的遞歸菜單

我對AngularJS來說是全新的（幾天前開始）。我想要構建一個ListView類型的菜單，並具有多個級別。我在網上找到的大多數例子都是爲了開發樹結構。我想要的是一次顯示一個級別。我拿起一個現有的例子如下面給出的（見本JSFiddle）：AngularJS中的遞歸菜單

這裏是我的HTML：

<div ng-app="app" ng-controller='AppCtrl'> 
    <script type="text/ng-template" id="categoryTree"> 
     {{ category.title }} 
     <ul ng-if="category.categories"> 
      <li ng-repeat="category in category.categories" ng-include="'categoryTree'" ng-click="DisplayNextLevel($index)">   
      </li> 
     </ul> 
    </script> 
    <ul> 
     <li ng-repeat="category in categories" ng-include="'categoryTree'"></li> 
    </ul>  
</div>

這是我的JS：

var app = angular.module('app', []); 

app.controller('AppCtrl', function ($scope) { 

    // Do something to display next Menu Level 
    $scope.DisplayNextLevel = function(Index) { 
     $window.alert('Alert!'); 
     $window.alert(Index); 
    }; 


$scope.categories = [ 
    { 
    title: 'Computers', 
    categories: [ 
     { 
     title: 'Laptops', 
     categories: [ 
      { 
      title: 'Ultrabooks' 
      }, 
      { 
      title: 'Macbooks'    
      } 
     ] 
     }, 

     { 
     title: 'Desktops' 
     }, 

     { 
     title: 'Tablets', 
     categories: [ 
      { 
      title: 'Apple' 
      }, 
      { 
      title: 'Android' 
      } 
     ]   
     } 
    ] 
    }, 

    { 
    title: 'Printers' 
    } 

]; 

});

我希望程序只顯示啓動時的第一級項目，即：

o Computers 
o Printers

當用戶點擊C omputers，它應該顯示計算機的一個新的水平，而除去第一級，即：

等等....

有人可以幫我如何修改DisplayNextLevel（），或任何其他方法來實現這一目標。

非常感謝！

來源

2015-02-07 Anjum

你必須有獨立的變量 - currentLevel和parentLevl

http://plnkr.co/edit/rNbEMoC3OrG7YMbl9aFW?p=preview

$scope.displayNextLevel = function(i) { 
    $scope.parentLevel = $scope.currentLevel[i]; 
    $scope.currentLevel = $scope.currentLevel[i].categories; 
}

來源

2015-02-07 14:45:49 CodingNinja

感謝您的快速反應。這很好。鑽取工作正常。現在我需要做些什麼才能在層次結構中恢復一級？我的意思是從一個低層到上一個/高層。 – Anjum 2015-02-07 15:10:07

你可以通過保存所有被點擊的索引並回溯路徑來實現它 – CodingNinja 2015-02-07 15:28:40

我接受你的答案是正確的答案。不過，如果您完成這項額外工作（即反向追溯），我將不勝感激。如果層數不知道，您是否說我需要存儲無限數量的指數？你能修改你的代碼來顯示嗎？非常感謝。 – Anjum 2015-02-07 15:35:19

AngularJS中的遞歸菜單

回答

相關問題