如何使用Angular JS遞歸遍歷具有未知層次結構的對象？

Question

舉個例子：

http://jsfiddle.net/7U5Pt/

在這里，我有一個描述（非常基本的）菜單的對象。 每個項目可以有多個子級，這些子級可能具有無限的層次結構。 我用來將其轉換為<ul><li>元素的ng-repeat指令在層次結構的前兩個級別上工作正常，但在層次結構的第三個級別或任何后續級別上則無法正常工作。

遞歸地迭代此對象並處理無限級別的子級的最佳方法是什么？

任何幫助，不勝感激！

這是小提琴消失的代碼：

HTML：

<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>

JS：

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"
  }]
};
});

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

顯然，遞歸助手是需要停止某種無限循環的事情，如討論在這里 。 感謝@arturgrzesiak提供的鏈接！