Question

所以请看这个例子：

这里我有一个描述（非常基本的）菜单的对象。每个项目可以有多个子级，可能具有无限级别的层次结构。我用来将ng-repeat元素转换为<ul><li>元素的<div ng-app="myApp"> <div ng-controller="myCtrl"> <nav class="nav-left"> <ul ng-repeat="item in mytree.items"> <li>NAME: {{ item.name }} <ul ng-repeat="item in item.children.items"> <li>SUB NAME: {{ item.name }}</li> </ul> </li> </ul> </nav> </div>指令适用于前两个级别，但不适用于层次结构的第三级或任何后续级别。

什么是递归迭代这个对象的最佳方式，处理无限级别的孩子？

非常感谢任何帮助！

这里的代码随着小提琴的消失而消失：

HTML：

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {
  $scope.mytree = {
  "items": [{
    "name": "one",
    "children": {
      "items": [
        {
          "name": "one sub a",
          "children": {
            "items": [{
              "name": "one sub level two a"
            },
            {
              "name": "one sub level two b"
            }]
          }
        },
        {
          "name": "one sub b"
        }
      ]
    }
  },
  {
    "name": "two"
  },
  {
    "name": "three"
  },
  {
    "name": "four",
    "children": {
      "items": [{
        "name": "four sub a"
      },
      {
        "name": "four sub b"
      }]
    }
  },
  {
    "name": "five"
  }]
};
});

JS：

{{1}}

Answer 1

事实证明，对于任何感兴趣的人来说，最好的方法是使用angular-recursion助手：

https://github.com/marklagendijk/angular-recursion

这允许您递归调用ng-repeat函数。所以在你看来，像是：

<tree family="mytree"></tree>

然后为其自己定义一个指令，如下所示：

.directive('tree', function(RecursionHelper) {
  return {
    restrict: "E",
    scope: {family: '='},
    template: 
      '{{ family.name }}'+
      '<ul ng-if="family.children">' + 
      '<li ng-repeat="child in family.children">' + 
      '<tree family="child"></tree>' +
      '</li>' +
      '</ul>',
    compile: function(element) {
      return RecursionHelper.compile(element);
   }
 };
});

显然，递归助手是必要的，以阻止某种无限循环的事情，如here所述。感谢@arturgrzesiak的链接！

如何使用Angular JS递归迭代具有未知层次结构的对象？

1 个答案: