Уровень мультименю Angular js

Я хочу перебрать массив меню и подменю (возможно, под подменю).

Я использую шаблон 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);
      }]
    }   
});

javascript angularjs metronic
person Fr4ncx    schedule 21.01.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете создать директиву, которая будет создавать списки рекурсивно.

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

Директива должна делать что-то вроде:

  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);
      }]
    }   
});
person Serginho    schedule 21.01.2016
comment
я создам директиву, но сначала я хочу отобразить правильное меню с помощью ng-repeat, посмотрите вопрос! - person Fr4ncx; 21.01.2016
comment
Вы не можете использовать ng-repeat, это не рекурсивно - person Serginho; 21.01.2016
comment
посмотрите вопрос, я пытался создать функцию печати List! Любое предложение? - person Fr4ncx; 22.01.2016
comment
и как я могу связать эту функцию с директивой? благодарю вас - person Fr4ncx; 22.01.2016
comment
scope.printList = function (dashitems) {... } Обратите внимание, что это область действия директивы. - person Serginho; 22.01.2016
comment
а в хтмл? ‹строка меню›‹/строка меню›? - person Fr4ncx; 22.01.2016

arrow_upward
0
arrow_downward

Посмотрите на исходный код. Они используют Bootstrap для создания многоуровневого меню. Вероятно, вам лучше всего посетить страницу Bootstrap. Они используют классы для составления меню. Вы можете сделать это через Bootstrap или в проекте AngularUI есть вариант чистой загрузки AngularJS.

Вы захотите использовать директиву для перебора вашей коллекции, например ng-repeat или что-то в этом роде. Вы также можете написать пользовательскую директиву, как предлагает другой ответ. Я считаю, что все сводится к вопросу предпочтений. Я использую ng-repeat и встраиваю повторы вместе для создания многоуровневых элементов.

person Branco    schedule 21.01.2016