列表卡与页眉页脚角离子
list card with header footer angular ionic
本文关键字:列表 更新时间:2023-09-26
我的问题很简单,我只是想创建列表卡与项目数组从控制器。但我困惑如何安排我的数据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;
})
Codepen
相关文章:
- 要求输入在数据列表中
- 从javascript创建一个列表
- 如何使用jQuery选择下拉列表的值
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- 如何使用json将对象列表从java转换为javascript
- 区分JSON中的矩阵和列表列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 接受不在列表中的值-引导组合框
- 禁用jQuery中的下拉列表
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 如何在javascript中迭代数字列表
- 如何在按钮中显示下拉列表中选定的元素
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 角度的项目列表 ng 重复,ng 单击显示全宽描述