angularJS 组表行

Question

我正在使用 AngularJS。我可以用 <tbody ng-repeat="subject2class in vm.sectionListWithClass" > 制作单张 table 但是如何对 col Class Standard 进行分组以避免重复。不重构 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

不确定 OP 在这里谈论的是什么，但是在我使用 Angular 搜索表分组时，谷歌将我带到了这里。这就是我最终要做的。对于此示例，假设有一个专辑对象数组，每个专辑对象都包含一个歌曲数组:

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