I need help figuring out how to display unique data dynamically for each tab within a table with tabs. Can anyone assist me with this?
https://i.stack.imgur.com/63H3L.png
Below is the code snippet for the tabs:
<md-tab ng-repeat="tab in tabs" label="{{tab.title}}">
<md-card layout="column" flex>
<md-tab-body>
<md-table-container md-scroll-y layout-fill layout="column" class="md-padding table-scroll">
<table md-table md-progress="promise" style="font-size: 11px !important;">
<thead md-head md-order="query.order">
<tr md-row>
<th md-column ng-repeat="tab in tabs track by tab.id"> {{ tab.content.Key }}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row>
<td ng-repeat="tab in tabs track by tab.id" md-cell>{{ tab.content.Value }}</td>
</tr>
</tbody>
</table>
</md-table-container>
</md-tab-body>
</md-card>
</md-tab>
</md-tabs>
This is the function that retrieves the result:
function getSummaryReportSchema(transactionid) {
transactionService.getSummaryReportSchema(transactionid, orgName)
.then((result) => {
var idx = 0;
result.forEach((element => {
var parsed = JSON.parse(element.Values.replace(/\r\n/g, ''));
vm.masterDetailResults.push(parsed);
vm.tabs.push({
id: idx++,
title: element.TaskName,
content: parsed
});
}));
});
};
Here is the link to view the results stored in vm.tabs - https://gist.github.com/Taifunov/c75d6d3d7ed6a32c2e9fdae24f24ae22