My issue is fairly straightforward - I am looking to create a list card with item array from my controller. However, I am struggling with how to structure my data in the HTML. The list card should have a header, content, and footer. I have attempted various scenarios to input the data into the list card. Here is a snippet from my controller:
.controller("homeController", function ($scope, $http) {
$scope.data = {};
var diagramlink = 'http://fendypradana.com/alfalahkeu/Apifalah/infobayar/format/json';
var processed_json = [], kategori = [],pembayaran_jumlah=[],sisa=[],jenisbayar_ket=[],statusbayar=[];
$http.post(diagramlink, { user_id: 4 }).then(function (res) {
for (i = 0; i < res.data.data.length; i++) {
var dataint = parseInt(res.data.data[i].bayar_jumlah)
processed_json.push(dataint);
kategori.push(res.data.data[i].pembayaran_tanggal);
pembayaran_jumlah.push(res.data.data[i].pembayaran_jumlah);
sisa.push(res.data.data[i].sisa);
jenisbayar_ket.push(res.data.data[i].jenisbayar_ket);
statusbayar.push(res.data.data[i].statusbayar);
}
$scope.bayar_jumlah=processed_json
$scope.pembayaran_tanggal=kategori
$scope.pembayaran_jumlah=pembayaran_jumlah
$scope.sisa=sisa
$scope.jenisbayar_ket=jenisbayar_ket
$scope.statusbayar=statusbayar
})
})
And here is my HTML:
<div class="item item-divider">
{{stooge}}
</div>
<div class="item item-text-wrap" ng-repeat="tanggal in pembayaran_tanggal track by $index">
{{tanggal}}
</div>
<div class="item item-divider" ng-repeat="status in statusbayar track by $index">
{{status}}
</div>
</div>
I have tried the above code, but it displays each data array in my list individually. My goal is to have each data item with its own header, content, and footer. Any suggestions would be greatly appreciated.
EDIT
I am aiming to structure my data in the list similar to the format shown in this example on Ionic Framework's documentation.