组合多个Ng重复

Combine Multiple Ng-Repeats

本文关键字：重复 Ng 组合      更新时间：2023-09-26

我有一个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。

如何重新构建代码？

要递归地为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>

注意：我还没有测试过这个代码，但只要稍微修改一下，你就可以让它工作了。

相关文章：