Javascript angularJS中节点未知时的构建菜单

考虑到我不知道父对象将有多少子对象，我如何使用ng repeat或任何其他方法创建菜单

假设我的目标是：

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

---

如何使用angularJS为上述对象创建菜单？

您需要事先知道子节点的深度

使用嵌套的

ng repeat

填充菜单。 这里有一些东西可以帮助您开始嵌套

ng repeat

：

JS:

$scope.menu=obj//将菜单对象传递给查看

HTML:

...
...
...

---

从伏伊塔吉纳开始，你做的和你想达到的完全一样

您可以使用递归

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>

---

您可以为菜单项编写一个指令，并沿节点递归使用它。递归指令会导致“太多递归”错误；因此，您需要从中使用RecursionHelper

请参阅更新的

.directive（“menuNode”，函数（RecursionHelper）{
返回{
范围：{
菜单节点：'='，
},
模板：“
{{menuItem.label}}
”，
编译：函数（元素）{
//使用RecursionHelper中的编译函数，
//并返回它返回的链接函数
返回RecursionHelper.compile（元素）；
}
};
})

到目前为止您尝试了什么？我在想如何或从哪里开始？在AngularJS中是否有任何可能的方法可以做到这一点？您可以将嵌套的“ng repeat”与绑定一起使用一次（对于性能而言，这不是必需的）。如果你不能实现你的愿望，这里的人会帮助你，如果你发布你的代码。我已经添加了一个plunker供你参考，@Aniket节点可以在树结构中不受限制。需要一个解决方案，可以有ng repeats dynamic或其他一些内置指令，可以帮助我解决这个问题。我发现这个链接非常有效，可以做到这一点（）。只需根据需要删除删除功能：但每次它都会在menu.nodes.only中遍历，而不会深入。i、 e子节点

<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":[{ ... }]
  }
];

.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);
    }
      };

})