递归 ng-repeat x 次

Question

我需要在我的 angular 模板中重复一个深度嵌套的 javascript object。问题是我无法控制数据是如何传递给我的，也无法知道数据的嵌套深度。

数据是这样的

{
    category_name: 'cat1'
    children: [
        {
            category_name: 'cat1a',
            children: [...]            
        }
    ]
}

和模板

<div ng-repeat="cat in categories">
    <div ng-repeat="subcat in cat.children">
        {{subcat.name}}
        <!-- 
            would like to programatically place an ng-repeat here too 
            if subcat.children.length > 0 
        -->
    </div>
    {{cat.name}}
</div>

这会检查两层深度，但我如何递归重复直到没有 children 剩余？我在想我需要创建一个自定义指令来根据需要编译一个新的 ng-repeat，我只是不确定如何去做。

Answer 1

尝试以下操作：

module.js

  var app = angular.module('app', []);
  app.component("category", {
      controller: function() {
        this.data = {
          category_name: 'cat1',
          children: [{
            category_name: 'cat1-A',
            children: [{
              category_name: 'cat1-A-a',
              children: [{
                category_name: 'cat1-A-a-1',
                children: []
              },
              {
                category_name: 'cat1-A-a-2',
                children: []
              }
            ]
            }]
          }]
        };
      },
      template: '<child current-cat="$ctrl.data"></child>'
    });

  app.component("child", {
    template: '<div>{{$ctrl.currentCat.category_name}}' +
      '<div style="padding-left:20px;" ng-repeat="cat in $ctrl.currentCat.children">' +
      '<child current-cat="cat"></child>' +
      '</div>' +
      '</div>',
    bindings: {
      currentCat: '<'
    }
  });

index.html

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="module.js"></script>
  </head>
  <body ng-app="app">
    <div>
      <category></category>
    </div>
  </body>
</html>

Answer 2

您可以将 ng-include 与指令脚本类型 ng-template/text 一起使用，并递归调用它以写入 n 个子级。 (PLUNKER)

<body ng-controller="MainCtrl as vm">
  <script type="text/ng-template" id="nested.html">
    {{item.category_name}}
    <ul>
      <li ng-repeat="item in item.children" ng-include="'nested.html'"></li>
    </ul>
  </script>

  <ul>
    <li ng-repeat="item in vm.data" ng-include="'nested.html'"></li>
  </ul>
</body>

查看 angular 文档了解更多信息：https://docs.angularjs.org/api/ng/directive/script

递归 ng-repeat x 次

Recursive ng-repeat x times

javascript

angularjs

angularjs-ng-repeat