[英]list card with header footer angular ionic
我的問題很簡單,我只想從controller..item創建帶有項目數組的列表卡,但是我很困惑如何將我的數據安排到html。 我的清單卡由頁眉,內容,頁腳組成。 我已經嘗試了每種情況下如何將數據放入列表卡,這是我的控制器
.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);
// processed_json.push(res.data.data[i].total);
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
})
})
這是我的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>
我已經嘗試過了,但它顯示了列表中的每個數據數組。 我應該做的是每個數據都有一個頁眉,內容和頁腳本身。任何建議都會有幫助。
編輯
我想將我的數據放入這樣的列表中http://ionicframework.com/docs/components/#card-headers-footers
這應該是真的
<div ng-repeat="tanggal in array.pembayaran_tanggal track by $index" style="margin-top:10px">
<div class="item item-divider">
Title
</div>
<div class="item item-text-wrap" >
{{tanggal}}
</div>
<div class="item item-divider">
{{array.statusbayar[$index]}}
</div>
</div>
控制器:
$scope.data = {};
$scope.array = {};
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);
// processed_json.push(res.data.data[i].total);
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.array.bayar_jumlah = processed_json;
$scope.array.pembayaran_tanggal = kategori;
$scope.array.pembayaran_jumlah = pembayaran_jumlah;
$scope.array.sisa = sisa;
$scope.array.jenisbayar_ket = jenisbayar_ket;
$scope.array.statusbayar = statusbayar;
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.