Wie rendere ich Baumstrukturdaten, indem ich das Template der Direktive verwende?

Question

Hat jemand versucht, Baumstrukturdaten mit einer Direktive zu rendern?

Was ich machen wollte, ist die Daten so darzustellen...

{ 
  name: "root", 
  next: null,
  child: {
    name : "1"
    next : {
      name : "2",
      next : {
        name: "3",
        next: null,
        child: null
      }, 
      child: {
        name: "2-1",
        next: null,
        child: null
      }
    },
    child: {
      name: "1-1",
      next: {
        name: "1-2",
        next: null,
        child: null
      },
      child: null
    }
  }
}

zu HTML-Daten wie

   root 

       1 

           1-1 
           1-2 

       2 

           2-1 

       3 

Ich weiß, dass ich, wenn die Daten ein Array sind, "ng-repeat" für das Template verwenden kann, und auch wenn die Daten ein Objekt sind, ich die Struktur kenne, kann ich den "{{ }}"-Tag verwenden.

Aber ich habe keine Ahnung, wie man Objektdaten behandelt, die sich dynamisch ändern. Das bedeutet, dass ich auch einige Kinder zu den Daten als ein Objekt im $scope hinzufügen möchte, und es synchron unter Verwendung von angular.js rendern möchte.

Hat jemand eine großartige Idee oder Erfahrung damit gemacht?

Answer 1

Angularjs

      [{{$index + 1}}] {{friend.name}} der {{friend.age}} Jahre alt ist.

result

[1] John, der 25 Jahre alt ist.
[2] Jessie, der 30 Jahre alt ist.
[3] Johanna, der 28 Jahre alt ist.
[4] Joy, der 15 Jahre alt ist.
[5] Mary, der 28 Jahre alt ist.
[6] Peter, der 95 Jahre alt ist.
[7] Sebastian, der 50 Jahre alt ist.
[8] Erika, der 27 Jahre alt ist.
[9] Patrick, der 40 Jahre alt ist.
[10] Samantha, der 60 Jahre alt ist.