多菜单级别Angular js

Question

我想遍历菜单和子菜单（可能是子菜单的子数组）的数组。

我用METRONIC模板（看看这个链接Metronic Template（"多级菜单"）

的倒数第二项我有这样的结构：

$scope.dashitems = [{ 
    title: 'Company', 
    icon: 'icon-layers', 
    href: '#/dashboard1', 
    isActive: path === '/dashboard1' 
}, { 
    title: 'Buildings', 
    icon: 'icon-layers', 
    href: '#/Buildings', 
    isActive: path === '/Buildings' 
}, { 
    title: 'Floors', 
    icon: 'icon-layers', 
    href: '#/Floors', 
    isActive: path === '/Floors' 
}, { 
    title: 'Spaces', 
    icon: 'icon-layers', 
    href: 'javascript:;', 
    isActive: path === '/Spaces', 
    subitems: [{ 
     title: 'OpenSpaces', 
     icon: 'icon-layers', 
     href: '#/OpenSpaces', 
     isActive: path === '/OpenSpaces', 
     subitems: [{ 
      title: 'OpenSpaces2', 
      icon: 'icon-layers', 
      href: '#/OpenSpaces2', 
      isActive: path === '/OpenSpaces2', 
     }] 
    }, ] 
}, { 
    title: 'Meeting', 
    icon: 'icon-layers', 
    href: '#/meeting', 
    isActive: path === '/meeting' 
}]; 

这不行：

function printList(dashitems){ 
      $scope.menu = '<ul>'; 
      angular.forEach(dashitems, function(value, key) { 
       $scope.menu+="<li>"; 
       if(value.hasOwnProperty('subitems')){ 


        $scope.menu=' <a ng-href="{{ value.href }}" class="nav-link nav-toggle">'+ 
           '<i ng-class="value.icon"></i>'+ 
           '<span class="title">{{ value.title }}</span>'+ 
           '<span class="arrow open"></span>'+ 
          '</a>'; 


        printList(value.subitems); 
       }else{ 

        $scope.menu+="<a href='javascript:;' class='nav-link nav-toggle'>"+ 
         "<i class='value.icon'></i>"+ 
         "<span class='title'>{{value.title}}</span>"+ 
        "</a></li>"; 
       } 
      }); 
      $scope.menu += "<ul>"; 
      return $scope.menu; 
     } 

如何遍历此结构并生成相同的html "多级菜单"？

编辑：

angular 
    .module('app').directive('menuBar', function() { 
    return { 
     restrict: 'E', 
     controller: ['$scope', '$location', function($scope, $location) { 
     //function & dashitems 
      $scope.printList($scope.dashitems); 
     }] 
    } 
}); 

Answer 1

您可以创建一个指令，使列表递归。

<menu ng-model="dashItems"></menu> 

该指令应该做somethink像：

1. 创建一个函数，的printList（dashItems）
2. 打开ul元素
3. 迭代dashItems，为每个项目生成li元素
4. 如果项目hasOwnProperty('subItem')，您递归地呼叫printList(dashItems.subitem)。
5. 最后关闭ul元素并返回列表。

现在你只需要做：element.append(printList(dashItems))

这是一个高层次的方法，但我认为它可能是有用的。

编辑：我会帮你创建函数：

function printList(dashitems){ 
      $scope.menu = '<ul>'; 
      angular.forEach(dashitems, function(value, key) { 
       $scope.menu+="<li>"; 
       if(value.hasOwnProperty('subitems')){ 

        $scope.menu=' <a ng-href="{{ value.href }}" class="nav-link nav-toggle">'+ 
           '<i ng-class="value.icon"></i>'+ 
           '<span class="title">{{ value.title }}</span>'+ 
           '<span class="arrow open"></span>'+ 
          '</a>'; 


        printList(value.subitems); 
       }else{ 

        $scope.menu+="<a href='javascript:;' class='nav-link nav-toggle'>"+ 
         "<i class='value.icon'></i>"+ 
         "<span class='title'>{{value.title}}</span>"+ 
        "</a>"; 
       } 
       $scope.menu+="</li>"; 
      }); 
      $scope.menu += "<ul>"; 
      return $scope.menu; 
     } 

我认为可以工作

angular 
    .module('app').directive('menuBar', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      list: '=dashitems' 
     } 
     controller: ['$scope', '$location', function($scope, $location) { 
     //function & dashitems 
      $scope.printList($scope.dashitems); 
     }] 
    } 
}); 

Answer 2

看看源代码。他们使用引导程序放在一起一个多级菜单。您可能最好查看Bootstrap's page。他们使用课程安排和设置菜单。你可以通过Bootstrap来实现，或者在AngularUI项目中有一个纯粹的AngularJS Bootstrap选项。

你会想要使用一个指令遍历你的集合，如ng-repeat什么的。你也可以写一个自定义指令，就像其他答案所建议的一样。我觉得这一切都归结为一个偏好问题。我使用ng-repeat和巢重复在一起创建多级项目。