这两天小编在实现一个页面分等级,每个等级下面有数据,单击可以将每个等级下的数据折叠展开,代码实现如下:
一、首先获取数据
ts文件内容:
// ts文件中
// 定义变量用来存放数据,并从后台获取数据
public levels:any;
public protectdatas:any;
接收数据类型格式 :
levels[
{ name : 1级 , protectdatas : ["2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"] },
{ name:2级 , protectdatas : [ "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"]}
];
//点击展开折叠
accordion(index,temp) {
this.temp=temp+index;
}
二、html页面
//html页面
<ion-header>
<ion-navbar>
<ion-title>
关卡介绍
</ion-title>
</ion-navbar>
</ion-header>
<ion-content no-padding no-margin>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
<textarea hidden=true #projectname>{{ item }}</textarea>
<p (click)="searchprojectdetails(projectname.value)">{{ item }}</p>
</ion-item>
</ion-list>
//折叠数据显示加效果实现
//ngFor循环数据显示出来
<ion-list *ngFor="let level of levels,let indx=index" style="margin: 0px">
<ion-item>
{{level.name}}
<ion-icon name="ios-arrow-down" item-right *ngIf="temp=='show'+indx" (click)="accordion(indx,'hihe')"></ion-icon>
<ion-icon name="ios-arrow-forward" item-right *ngIf="temp!='show'+indx" (click)="accordion(indx,'show')"></ion-icon>
</ion-item>
//展开折叠后显示的内容
<ion-card *ngIf="temp=='show'+indx">
<ion-card-content *ngFor="let item of level.project;let i= index">
<p (click)="projectdetails(id.value)">{{item.projectName}}</p>
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
三、运行效果
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)