Меню здания, когда узлы не известны в angularJS

Question

Учитывая, что я не знаю, сколько под-объектов будет иметь мой родительский объект, как создать меню с помощью ng-repeat или любого другого метода.

Скажем, мой объект:

var Obj=[{ 
    "node1":[{ 
     "Subnode1":[{ 
       "SubSubNode1":[{ 
         ... 
        }] 
       }] 
    },{ 
     "Subnode2":[{ ... }] 
    }] 
},{ 
    "node2":[{ ... }] 
}]; 

Как я могу создать меню для вышеуказанного объекта с помощью angularJS?

Answer 1

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

<script type="text/ng-template" id="menu-node.html"> 
    <markup-of-your-node>{{ node.name }}</markup-of-your-node> 
    <ul> 
    <li ng-repeat="childNode in node.children" ng-include="'menu-node.html'"> 
    </li> 
    </ul> 
</script> 

<ul> 
    <li ng-repeat="node in menu.nodes" ng-include="'menu-node.html'"></li> 
</ul> 

Чтобы использовать эту технику, вам необходимо обновить объект со следующей структурой:

var nodes=[ 
    { 
    "name": "node1", 
    "children":[ 
     { 
     "name": "Subnode1", 
     "children":[ 
      { 
      "name": "SubSubNode1", 
      "children":[{ ... }] 
      } 
     ] 
     }, 
     { 
     "name": "Subnode2", 
     "children":[{ ... }] 
     } 
    ] 
    }, 
    { 
    "name": "node2", 
    "children":[{ ... }] 
    } 
]; 

Answer 2

Вам необходимо заранее знать глубину ваших подузлов.

Используйте вложенные ng-repeat, чтобы заполнить ваши меню. Вот кое-что, чтобы вы начали на вложенной ng-repeat:

JS: $scope.menu = obj; //pass your menu object to view

HTML:

  <div ng-repeat="m in menu"> 
       ... 
       <div ng-repeat="s in m"> 
        ... 
        <div ng-repeat="sn in s"> 
        ... 
        </div> 
       </div> 
      </div> 

Here's a fiddle от vojtajina делает точно так же вы хотите достичь.

Answer 3

Вы можете написать директиву для пункта меню и использовать ее рекурсивно вдоль ваших узлов. Рекурсивные директивы вызовут ошибку «слишком много рекурсии»; поэтому вам нужно будет использовать RecursionHelper от this post.

Просмотреть обновленный Plunker.

.directive("menuNode", function(RecursionHelper){ 

    return { 
     scope: { 
      menuNode: '=', 
     }, 
     template: '<ul><li ng-repeat="menuItem in menuNode track by $index">{{menuItem.label}}<div ng-if="menuItem.nodes" menu-node="menuItem.nodes"></div></li></ul>', 
    compile: function(element) { 
     // Use the compile function from the RecursionHelper, 
     // And return the linking function(s) which it returns 
     return RecursionHelper.compile(element); 
    } 
     }; 

})