带有页眉页脚角离子的列表卡答案

【问题标题】：list card with header footer angular ionic带有页眉页脚角离子的列表卡
【发布时间】：2016-10-06 22:58:43
【问题描述】：

我的问题很简单，我只想使用控制器中的项目数组创建列表卡。但我很困惑如何将我的数据排列到 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

【问题讨论】：

我不明白您是否想要一个包含每个 NG-REPEAT 元素的页眉、内容和页脚的卡片列表？

标签： javascript html css angularjs ionic-framework

【解决方案1】：

这应该是真的

<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;
   })

Codepen

【讨论】：