Ich benutze AngularJS. Ich kann eine einzelne Tabelle mit <tbody ng-repeat="subject2class in vm.sectionListWithClass" > erstellen, aber wie man col Class Standard gruppiert, um Wiederholungen zu vermeiden. Was kann erreicht werden, ohne das JSON-Array neu zu strukturieren?

Willst du so ... Gruppierungsklasse und ZWEI Zeilen jedes Abschnitts, wenn es zwei Arten von Hauptthemen und Optionen gibt

|   Class Standard          |Class Section          |Class Section Name         |Subjects
|---------------------------|------------------------------------------------------------------------------------------------
|   Prep-2015               |A                      |ROSEs                      |Main Subject: Chemistry, Physics
|                           |------------------------------------------------------------------------------------------------
|                           |B                      |RED                        |
|                           |--------------------------------------------------------------------------------------------------
|                           |C                      |green                      |
|-----------------------------------------------------------------------------------------------------------------------------
|   NUR                     |A                      |ROME                       |
|                           |--------------------------------------------------------------------------------------------------
|                           |B                      |PARIS                      |
|-----------------------------------------------------------------------------------------------------------------------------
|   STD-1s                  |A                      |DON                        |Optional Subjects:  P.T, 3rd 
|-----------------------------------------------------------------------------------------------------------------------------
|   STD-6                   |A                      |ROCKS                      |Main Subject: Chemistry, Physics, 
                            |                       |                           |---------------------------------------------
|                           |                       |                           |Optional Subjects:  3rd lang German
|------------------------------------------------------------------------------------------------------------------------------

Mein JSON-Array ist so

 [
      {
    "classStd": "Prep-2015",
    "classId": "1",
    "section": "A",
    "sectionName": "ROSEs",
    "sectionId": "5",
    "mainSubjectAllocationList": "Chemistry, Physics",
    "mainSubjectAllocationId": "25",
    "optionSubjectAllocationList": "",
    "optionSubjectAllocationId": ""
  }
    ]


<table class="formatHTML5">
            <!-- TABLE HEADER-->
            <thead>
            <tr>
                <th>Class Standard</th>
                <th>Class Section</th>
                <th>Class Section Name</th>
                <th>Main Subjects </th>
            </tr>
            </thead>

            <!-- TABLE BODY: MAIN CONTENT-->
            <tbody ng-repeat="subject2class in vm.sectionListWithClass" >
            <tr >
                <td ><a ui-sref="classEdit({classId: subject2class.classId})"> {{subject2class.classStd}}</td>
                <td><a ui-sref="sectionEdit({sectionId: subject2class.sectionId})"> {{subject2class.section}}</a></td>
                <td><a ui-sref="sectionEdit({sectionId: subject2class.sectionId})"> {{subject2class.sectionName}}</a> </td>
                <td> <b ng-hide="!subject2class.mainSubjectAllocationList">Main Subject: </b><i class="glyphicon glyphicon-edit" ng-hide="!subject2class.mainsubjectName"></i>
                    <a ui-sref="subjectAllocationEdit({allocationId:subject2class.mainAllocation, classId: subject2class.classId, sectionId: subject2class.sectionId, Type:'main'})">
                    {{subject2class.mainSubjectAllocationList}}</a><br ng-hide="!subject2class.mainsubjectName"><br>

                    <b ng-hide="!subject2class.optionSubjectAllocationList">Optional Subjects: </b><a ui-sref="subjectAllocationEdit({classId: subject2class.classId, sectionId: subject2class.sectionId, Type:'optional', allocationId:subject2class.optionalAllocation})">
                        <i class="glyphicon glyphicon-edit" ng-hide="!subject2class.optionSubjectAllocationList"></i></a>
                    {{subject2class.optionSubjectAllocationList}}</td>

            </tr>
            </tbody>
        </table>
3
fresher 5 Jän. 2016 im 20:26

2 Antworten

Beste Antwort
<table class="formatHTML5">
            <!-- TABLE HEADER-->
            <thead>
            <tr>
                <th>class Standard</th>
                <th>class Details (Sections and Subjects)</th>
            </tr>
            </thead>
            <tbody ng-repeat="(key, value) in vm.sectionListWithClass | groupBy: 'classStd'" >
            <tr >
                <td>
                    {{ key }}
                </td>
                <td>
                    <table class="table table-responsive">
                        <thead >

                        <tr  ng-hide="!player.sectionName" ng-repeat-start="player in value" ng-if="$first" big ng-repeat-end ng-if="!$first">
                            <th>Section</td>
                            <th>Subject</td>
                        </tr>
                        </thead>
                        <tr ng-repeat="player in value">

                            <td ng-hide="!player.sectionName" width="20%">{{ player.section }} ( {{ player.sectionName }} )</td>
                            <td ng-hide="!player.sectionName" width="80%">
                                <strong ng-hide="!player.mainSubjectAllocationList">Main Subjects : </strong>{{ player.mainSubjectAllocationList }}
                                <strong ng-hide="!player.optionSubjectAllocationList"><br>Optional Subjects : </strong></strong> {{player.optionSubjectAllocationList }}
                            </td>

                        </tr>
                    </table>
                </td>



            </tr>
            </tbody>

        </table>
-1
fresher 6 Jän. 2016 im 06:55

Ich bin mir nicht sicher, wovon OP hier spricht, aber Google hat mich bei meiner Suche nach Tabellengruppierung mit Angular hierher geführt. Das habe ich letztendlich getan. In diesem Beispiel wird ein Array von Albumobjekten angenommen, von denen jedes ein Array von Songs enthält:

<table>
    <tbody ng-repeat="album in albums">
        <tr ng-repeat="songs in album.tracks">
            <td>...</td>
        </tr>
    </tbody>
</table>
0
stackPusher 10 Feb. 2017 im 03:36