我正在使用AngularJS。我可以使用<tbody ng-repeat="subject2class in vm.sectionListWithClass" >创建单个表，但是如何对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>
答案 0 :(得分：0)
不确定OP在这里谈论什么，但谷歌在我搜索与Angular的表格分组时引导我。这就是我最终做的事情。对于此示例，假设一个专辑对象数组，每个对象包含一组歌曲：
<table>
<tbody ng-repeat="album in albums">
<tr ng-repeat="songs in album.tracks">
<td>...</td>
</tr>
</tbody>
</table>
答案 1 :(得分：-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>