angularJS组表行

Question

我正在使用AngularJS。我可以使用<tbody ng-repeat="subject2class in vm.sectionListWithClass" >制作单个表，但是如何分组类标准以避免重复。在不重构JSON数组的情况下实现什么？

想要这样..。如果有两种类型的主题主选项和选项，则分组类和每节的两行。

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

我的JSON数组如下

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

Answer 1

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

Answer 2

不知道OP在这里说的是什么，但是google在我搜索带有角的表分组时把我带到了这里。这就是我最后要做的。在本例中，假设有一个相册对象数组，其中每个对象包含一个歌曲数组：

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