Angular js: Wie ‚Schleife in Schleife‘ in HTML-Tabellen

Question

zu verwenden, habe ich eine json Struktur wie

studentList = [ 
     { 
      'name': 'name', 
      'isNew': True, 
      'class': 'class', 
      'subjects': [ 
       { 
       'name': 'subname', 
       'mark': 70 
       }, { 
       'name': 'subname2', 
       'mark': 80 
       }, 
      ] 
     }, 
     ..... 
    ] 

Ich versuche, diese Daten in einer HTML-Tabelle zu setzen. Der folgende Code funktioniert nicht für mich.

<table> 
..... 

<tbody> 
    <div ng-repeat="student in student_list"> 
     <tr ng-class='{in:$first}'> New Student </tr> 
     <div ng-if="student.isNew"> 
      <tr> 
       <td> {{student.name}} </td> 
       <td> {{student.class}} </td> 
       <div ng-repeat="(key, subject) in student.subjects> 
        <td> {{subject.name}} </td> 
        <td> {{subject.mark}} </td> 
       </div> 
      </tr> 
     </div> 

     // Old student 
     <tr ng-class='{in:$first}' > Old Student </tr> 
     .... 

    </div> 
</tbody> 

Wenn ich nicht <div> verwendet haben, kann ich Schleife durch den Tisch. Aber wie kann ich für die obige Tabellenstruktur Daten unter Verwendung von eckig darstellen.

Answer 1

Ein div Element ist nicht für ein direktes Kind des Elements tbody gültig. Fügen Sie einfach das ng-repeat zum tr Element hinzu.

Wenn Sie auf einmal mehr als 2 tr Elemente wiederholen, können Sie die ng-repeat-start Direktive verwenden:

<tr ng-repeat-start="student in student_list"> 
    <!-- .. --> 
</tr> 
<tr ng-repeat-end> 
    <!-- you still have the student object available here --> 
</tr> 

Answer 2

Sie könnten die in Winkel Richtlinie „Filter“ gebaut verwenden. Also auf deine ng-Wiederholung kannst du haben.

Neue Schüler

<tr ng-repeat="student in studentList | filter : isNew"> 
<td>{{stuffgoeshere}}</td> 
</tr> 

Alte Studenten

<tr ng-repeat="student in studentList | filter !isNew"> 
<td>{{stuffgoeshere}}</td> 
<tr> 

Hoffe, es hilft!

Answer 3

Es gibt mehrere Probleme mit Ihrem Markup, die Ihre Ausgabe durcheinander bringen. Sie könnten so etwas tun. Im Gegensatz zu anderen html-Tags sind table, tbody, tr, td, tbody -Tags eng gruppiert, Sie können divs nicht als untergeordnete Tags in einem von ihnen haben.

Obwohl es Arbeit manchmal scheint, aber es ist nicht etwas, was Sie tun sollten. Versuchen Sie immer, der Verschachtelung als Tabelle zu folgen => tbody => tr => td => irgendein Tag.

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 

 
    $scope.pro = [{ 
 
     product: "chicken", 
 
     rating: 3 
 
    }, { 
 
     product: "fish", 
 
     rating: 3 
 
    }, { 
 
     product: "pizza", 
 
     rating: 4 
 
    }]; 
 

 
    $scope.studentsList = [{ 
 
     'name': 'StudentName', 
 
     'isNew': true, 
 
     'class': 'class', 
 
     'subjects': [{ 
 
     'name': 'subname', 
 
     'mark': 70 
 
     }, { 
 
     'name': 'subname2', 
 
     'mark': 80 
 
     }, ] 
 
    }, { 
 
     'name': 'StudentNameOld', 
 
     'isNew': false, 
 
     'class': 'class', 
 
     'subjects': [{ 
 
     'name': 'subname', 
 
     'mark': 70 
 
     }, { 
 
     'name': 'subname2', 
 
     'mark': 80 
 
     }, ] 
 
    }]; 
 

 
    } 
 
]);

td { 
 
    border: 1px solid black; 
 
} 
 
.header > td { 
 
    font-weight: bold; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <table> 
 
     <tbody ng-repeat="student in studentsList"> 
 
     <tr ng-if="student.isNew" class="header"> 
 
      <td colspan="2">New Student</td> 
 
     </tr> 
 
     <tr ng-if="!student.isNew" class="header"> 
 
      <td colspan="2">Old Student</td> 
 
     </tr> 
 
     <tr ng-repeat="course in student.subjects"> 
 
      <td>{{course.name}} 
 
      </td> 
 
      <td> 
 
      {{course.mark}} 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>