I have an array of objects structured like this:
myCtrl.siteNameLabels = myCtrl.actual.map(function (value, index) {
return {
actualSite: {
actualSiteName : value,
actualSiteData: myCtrl.tableData[index]
},
pastSite: {
pastSiteName : myCtrl.pastSiteNameLabels[index] + "_past",
pastSiteData : myCtrl.tableDataPast[index]
}
}
})
The array contains pairs of sites (current and past), each with a shared name where the past site is identified by having "_past" at the end. Both current and past sites have associated data in the form of numeric arrays.
While every site has present data, not all sites have past data available.
The challenge lies in displaying this data in a table header as follows:
Site1 | Site1_past | Site2 | Site3 | Site3_past | Site4
If only present site data was present, it could easily be displayed using an ng-repeat. However, the task includes integrating the optional past site data alongside their corresponding present sites.
This code snippet demonstrates how to generate the display for present sites:
<thead>
<tr>
<th ng-repeat="label in $ctrl.siteNameLabels">{{label.actual.actualSiteName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rows in $ctrl.tableData[0] track by $index">
<td>{{$ctrl.dateLabels[$index]}}</td>
<td ng-repeat="label in $ctrl.actualSiteNameLabels">{{$ctrl.tableData[$index][$parent.$index]}}</td>
</tr>
</tbody>
This would render the display as:
Site1 | Site2 | Site3 | Site4
Do you have any suggestions on how to modify it to achieve the desired format?
Site1 | Site1_past | Site2 | Site3 | Site3_past | Site4