Wie erstellt man Unterzeilen in angularjs?

Question

Ich habe eine Tabelle mit eckigen erstellt. Einige Zeilen in der Tabelle haben untergeordnete Zeilen mit denselben Eigenschaften wie die übergeordneten Elemente. Ich möchte die untergeordneten Zeilen erstellen, wenn der Benutzer auf die übergeordnete Zeile klickt (die übergeordneten Zeilen hätten ein Karottezeichen, das angibt, dass einige untergeordnete Zeilen vorhanden sind). Ich bin wirklich neu in eckigen und ich muss ein Beispiel sehen, so dass ich verstehen kann, wie es in eckigen geschieht. Kann jemand helfen?

hier ist mein html:

<div data-ng-app="myModule"> 
    <div data-ng-controller="myController"> 
     <table> 
      <thead> 
       <tr> 
        <th></th> 
        <th>First Name</th> 
        <th>Last Name</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-ng-repeat="student in students"> 
        <th> 
         <span data-ng-show="{{student.hasChildren}}"> 
          <image data-ng-click="getChildren(student)" data-ng-src="image"></image> 
         </span> 
        </th> 
        <th>{{student.firstName}}</th> 
        <th>{{student.lastName}}</th> 
       </tr> 
       <tr data-ng-repeat="child in children"> 
        <th></th> 
        <th>{{child.firstName}}</th> 
        <th>{{child.lastName}}</th> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

die „hasChildren“ Zelle würde eine Karotte Zeichen haben, die die Kinder Reihen kollabieren und erweitern.

hier ist die js-Datei:

var app = angular 
.module("myModule", []) 
.controller("myController", function ($scope, $http) { 
    $http({ 
     method: 'GET', 
     url: contextPath + '/students' 
    }) 
     .then(function (response) { 
      var students = response.data; 
      $scope.students = students; 
     }); 

    $scope.getChildren = function(student){ 
     var parentStudentId = student.id; 
     $http({ 
      method: 'GET', 
      url: contextPath + '/students/children?studentId=' + parentStudentId 
     }) 
     .then(function (response) { 
      var children = response.data; 
      $scope.children = children; 
     }); 
    } 
}) 

Answer 1

einen Blick auf diese Probe

Ansatz

<table> 
    <tbody ng-repeat="parent in parents"> 
    <tr> 
     <td> 
     Parent ... 
     </td> 
    </tr> 
    <tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children"> 
     <td> 
     Child... 
     </td> 
    </tr> 
    </tbody> 
</table> 

Code:

$scope.getChildren = function(student) { 
    studen.expanded = !student.expanded; // expand/collapse items 
    if (student.children) { // request a server only once to get the children 
     return; 
    } 

    var parentStudentId = student.id; 
    $http({ 
     method: 'GET', 
     url: contextPath + '/students/children?studentId=' + parentStudentId 
    }) 
    .then(function (response) { 
     student.children = response.data; // fill student children collection 
    }); 
} 

HTML Beispiel:

<div data-ng-app="myModule"> 
    <div data-ng-controller="myController"> 
     <table> 
      <thead> 
      <tr> 
       <th></th> 
       <th>First Name</th> 
       <th>Last Name</th> 
      </tr> 
      </thead> 
      <tbody data-ng-repeat="student in students"> 
      <tr> 
       <th> 
        <span data-ng-show="{{student.hasChildren}}"> 
         <image data-ng-click="getChildren(student)" data-ng-src="image"></image> 
        </span> 
       </th> 
       <th>{{student.firstName}}</th> 
       <th>{{student.lastName}}</th> 
      </tr> 
      <tr data-ng-repeat="child in student.children" 
       ng-show="student.expanded"> 
       <th></th> 
       <th>{{child.firstName}}</th> 
       <th>{{child.lastName}}</th> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div>