多菜单级Angular js

时间:2016-01-21 16:10:42

标签: javascript angularjs metronic

我想循环遍历一系列菜单和子菜单(可能是子菜单的子目录)。

我使用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;
        }

如何遍历此结构并生成&#34;多级菜单&#34;的相同html; ?

编辑:

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

2 个答案:

答案 0 :(得分:1)

您可以创建一个递归制作列表的指令。

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

该指令应该做一些事情,如:

  1. 创建一个函数printList(dashItems)
  2. 打开ul元素
  3. 迭代dashItems,为每个项目生成一个li元素
  4. 如果是hasOwnProperty('subItem')项,则递归致电printList(dashItems.subitem)
  5. 最后关闭ul元素并返回列表。
  6. 现在你只需做: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);
          }]
        }   
    });
    

答案 1 :(得分:0)

查看源代码..他们使用Bootstrap组合一个多级菜单。结账Bootstrap's page可能是最好的。他们使用课程来安排和设置菜单。你可以通过Bootstrap来实现,或者在AngularUI项目中有一个纯粹的AngularJS Bootstrap选项。

您将要使用指令迭代您的集合,如studnumber或其他东西。您也可以像其他答案一样编写自定义指令。我发现这一切都取决于偏好。我使用ng-repeat并将重复嵌套在一起以创建多级项目。