Question

我有一个html结构，其中每个孩子都有不同的长度值：

<div ng-repeat='element in treeView'>
    <div ng-repeat='element1 in element.children'>
        <div ng-repeat='element2 in element1.children'>
            <div ng-repeat='element3 in element2.children'>
                <div ng-repeat='element4 in element3.children'>
                    <div ng-repeat='element5 in element4.children'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我不喜欢多个ng-repeat。

如何重新构建代码？

Answer 1

要以递归方式为treeView的所有子节点创建DOM节点，您可以创建一个新组件。

使用示例：

<your-directive elements="vm.elements"></your-directive>

组件代码：

angular.module('yourApp')
  .component('yourDirective', {
    templateUrl: 'template.html',
    bindings: {
      elements: '='
    },
    bindToController: true,
    controllerAs: 'vm'
  });

模板代码：

<div ng-repeat="element in vm.elements">
    <your-directive ng-if="vm.elements.children.length > 0" elements="vm.elements"></your-directive>
</div>

注意：我还没有对这段代码进行过测试，但稍加修补就可以让它发挥作用。

结合多个Ng重复

1 个答案: