I've been facing difficulties in effectively presenting my data in a table using the ng-repeat feature of Angular. While this should be a straightforward task with ample examples available, I suspect that the problem lies in namespacing. In particular, where I have utilized self.all
as the variable for my data in the JavaScript file.
HTML:
<div class="container">
<div ng-controller="TransferController as transfers">
<table st-table="transfers" class="table table-striped">
<thead>
<tr ng-repeat="row in transfers.all">
<td>Period: {{ row.period }}</td>
<td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
</tr>
<tr ng-repeat="code in transfers.all.sections">
<td colspan="3">Transfer Code: {{ code.transferCode }}</td>
</tr>
<tr>
</thead>
</table>
</div>
</div>
TransferController.js:
angular
.module("RssTransfers")
.controller("TransferController", ["$http", "$filter", function($http, $filter) {
var self = this;
self.all = [];
function getTransfers() {
$http
.get("http://localhost:3000/transfers/api")
.then(function(response) {
self.all = response.data.transfers;
})
}
console.log(self);
getTransfers();
}]);
Sample data:
[{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
"transferCode": 8675309,
"details": [
{
"voucherNumber": [34, 22],
"vendor": "jimmy",
"description": "blah ",
"amount": "t 45,555.00"
}
]
}]
},
{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
"transferCode": 45576543,
"details": [
{
"voucherNumber": 22,
"vendor": "Jonson",
"description": "trap music ",
"amount": "t 12,345.00"
}
]
}]
}]
I attempted to create a Plunker demonstration but encountered challenges in getting Angular to function properly. Upon testing, period
and uploadDate
display correctly on the page, whereas the row corresponding to transferCode
fails to render at all. Any assistance offered would be highly appreciated; it seems likely that I've made a simple error somewhere.
EDIT:
Apologies for the oversight. The sample data posted initially was inaccurate as it did not include the section
object. The corrected model has now been provided.