angularjs - 如何迭代多级嵌套 JSON 数组？

Question

我有一个 JSON 数组，其结构如下：

[{"a":"b","child":[{"a":"c","child":["a":"d","child":[]]}]

该数组具有任何级别的子级，并且级别是可变的。基本上，我在站点结构上构建了一个 JSON 数组。我需要遍历这个列表并构建一个 HTML 结构，如下所示：

<ul>
 <li>
  <a href="b">
   <ul>
     <li>
       <a href="c">
         <ul>
           <li> <a href="d"> </li>
         </ul>
        </a>
       </li>
      </ul>
    </a>
  </li>
</ul>

请让我知道这是否可以在 AngularJS 中使用 ng-repeat 和 ng-template 实现。

Answer 1

尝试关注

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

app.controller('MainCtrl', function($scope) {
  $scope.object = [{"a":"b","child":[{"a":"c","child":[{"a":"d","child":[]}]}]}];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.min.js"></script>
<div ng-app="testApp">
<div ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="node in object" ng-include="'tree'"></li>
</ul>

<!-- recursive template -->
<script type="text/ng-template" id="tree">
    <a href="{{node.a}}">{{node.a}}
        <ul data-ng-if="node.child && node.child.length">
            <li ng-repeat="node in node.child" ng-include="'tree'"></li>
        </ul>
    </a>
</script>
</div>
</div>