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中的递归菜单

回答

相关问题