Mehrere Ng-Repeats

Question

Ich habe eine HTML-Struktur, bei der jeweils die Kinder unterschiedliche Längenwerte haben:

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

Ich mag mehrere ng-repeat nicht.

Wie strukturiere ich den Code neu?

Answer 1

Um DOM-Knoten für alle untergeordneten Elemente von treeview rekursiv zu erstellen, können Sie eine neue Komponente erstellen.

Beispiel Nutzung:

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

Komponentencode:

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

Template Code:

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

Hinweis: Ich habe diesen Code nicht getestet haben, aber mit ein wenig Bastelei sollten Sie Mach das zur Arbeit.