多菜单级别 Angular js

Multi-menu level Angular js

本文关键字：Angular js 菜单更新时间：2023-09-26

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

我使用Metronic模板（查看此链接的倒数第二项 Metronic模板（"多级菜单"）

我有这个结构：

$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);
      }]
    }   
});

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

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

该指令应该像这样思考：

创建一个函数打印列表（破折号项目）
打开 UL 元素
迭代破折号项，为每个项生成一个 li 元素
如果项目hasOwnProperty('subItem')，则以递归方式调用printList(dashItems.subitem)。
最后关闭 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);
      }]
    }   
});

查看源代码。他们使用Bootstrap来组合一个多级菜单。您可能最好查看Bootstrap的页面。他们使用类来安排和设置菜单。你可以通过 Bootstrap 来完成，或者在 AngularUI 项目中有一个纯的 AngularJS Bootstrap 选项。

您将需要使用指令来迭代您的集合，例如ng-repeat或其他东西。您也可以像其他答案建议的那样编写自定义指令。我发现这一切都归结为偏好问题。我使用ng-repeat和嵌套重复一起来创建多级项目。