angularJS group table rows

Question

I am using AngularJS. I am able to make single table with <tbody ng-repeat="subject2class in vm.sectionListWithClass" > but how to group col Class Standard to avoid repeat. What to achieve without restructuring JSON array

Want like this... grouping class and TWO row of each section if there is two type of subject main and option

|   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
|------------------------------------------------------------------------------------------------------------------------------

My JSON array is like this

 [
      {
    "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>

This should help with your issue: http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter — kozlice, Jan 05 '16 at 17:35
Possible duplicate of [How can I group data with an Angular filter?](https://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter) — ToddJCrane, Jul 09 '17 at 07:32

score 0 · Answer 1 · answered Feb 10 '17 at 03:36

Not sure what OP is talking about here, but google led me here during my search for table grouping with Angular. This is what I ended up doing. For this example assume an array of album objects, each of which contains an array of songs:

<table>
    <tbody ng-repeat="album in albums">
        <tr ng-repeat="songs in album.tracks">
            <td>...</td>
        </tr>
    </tbody>
</table>

score -1 · Accepted Answer · answered Jan 06 '16 at 06:55

<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>

this is not working for me can you please suggest wats the logic you have used to repeat the second table nested — Anirudh Agarwal, Apr 22 '16 at 11:00
This answer is incorrect as groupBy is not a valid filter, at least not a standard one. — ToddJCrane, Jul 09 '17 at 07:31

angularJS group table rows

2 Answers2