Многоуровневый уровень Angular js

Question

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

Я использую Metronic шаблон (смотрите второй-последний пункт этой ссылке Metronic Template (Меню " Multi Level ")

У меня есть эта структура:

$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 " Многоуровневое меню "?

EDIT:

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. создать несильно перечень печати (dashItems)
2. открыть уль элемент
3. Iterate dashItems, для каждого элемента создает Lī элемент
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 собрать многоуровневое меню. Вероятно, вам лучше всего будет проверять Bootstrap's page. Они используют классы для организации и настройки меню. Вы можете сделать это через Bootstrap, или в проекте AngularUI есть чистая опция AngularJS Bootstrap.

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