2016-08-02 24 views
0

Ich arbeite an einem Projekt, das teilweise aus einer Baumansicht von Dokumenten besteht.Allgemeine Methode zum Anzeigen eines beliebigen TreeView mit AngularJS

Ich bin vor kurzem in ein Problem gerannt und ich weiß nicht, wie man es löst, also kam ich hierher, um um Hilfe zu bitten.

Das Problem ist, ich habe ein Array, das alle Daten enthält, die ich brauche. Es gibt Dokumente in Ordnern und/oder Ordnern in Ordnern usw. Ich weiß, wie man die "Kinder" jedes Ordners rendert, aber das Problem ist, dass ich nicht weiß, wie ich es generell machen soll. Ich habe eine einfache JSFiddle codiert das Problem besser zu veranschaulichen: http://jsfiddle.net/k3nj6pco/

Sie können sehen, dass einfach Kinder 1.1 und 1.2 ist zeigt. Aber ich kann nicht herausfinden, wie Kind 1.1.1 ohne eine dritte ng-repeat Schleife anzuzeigen. Und ich würde gerne auf n Tiefe-Ebene verallgemeinern.

Weiß jemand, wie ich dieses Problem lösen kann? Vielen Dank für Ihre Zeit !

Antwort

1

Ich würde dies mit einer rekursiven Anweisung lösen.

einen Blick auf recursive directives

Der Kern ist:

<div ng-controller="IndexCtrl"> 
    <collection collection='locations'></collection> 
</div> 

app.directive('collection', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      collection: '=' 
     }, 
     template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>" 
    } 
}) 

und dann:

<member ng-repeat='member in collection' member='member'></member> 

app.directive('member', function ($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      member: '=' 
     }, 
     template: "<li></li>", 
     link: function (scope, element, attrs) { 
      if (angular.isArray(scope.member.children)) { 
       element.append("<collection collection='member.children'></collection>"); 
       $compile(element.contents())(scope) 
      } 
     } 
    } 
}) 

so werden Sie die Sammlungs-Anweisung in Ihrem Mitglieds Richtlinie kompilieren, wenn es noch Kinder.

Mit freundlichen Grüßen

+1

Vielen Dank Herr, es funktioniert wie ein Charme! – Dayrona