As a newcomer to angularjs and web-development, I am facing a challenge with using ng-repeat to display data in a complex table structure, like this:
A B C D
abc pqr xyz std
Here is the code snippet:
<div class="table-responsive">
<table class="table table-striped table-bordered report-table table-fixed" contextmenu-container="meta.contextmenu" fixed-header>
<thead class="text-center text-info">
<th class="text-center">A</th>
<th class="text-center">B</th>
<th class="text-center">C</th>
<th class="text-center">D</th>
</thead>
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field" contenteditable="{{enableReportEditing}}" contextmenu-item="report" context-menu="menuOptions">{{ report.attributes.field }}</td>
<td>
<input type="checkbox" ng-if="report.attributes.message && showcheckbox" ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
<span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
{{ report.attributes.message }}
</span>
<span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
</td>
<td class="text-center">{{ report.attributes.score }}</td>
</tr>
</table>
</div>
Here is the json structure:
{
"type": "report",
"id": 14,
"attributes": {
"annotation": "abc",
"field": "pqr",
"message": "xyz",
"score": "7"
},
"innerAnnotations": {
{
"annotation": "jkl",
"field": "pqr",
"message": "xyz",
"score": "6"
},
{
"annotation": "Qualification",
"field": "EFG",
"message": "HIJ",
"score": "5"
}
}
},
The desired table output should be as follows (with 'abc' as the parent):
A B C D
abc pqr xyz 7
jkl pqr xyz 6
Qualification EFg Hij 5
I have attempted some solutions without success. Any assistance in resolving this issue would be greatly appreciated.