Angular+ionic列渲数据实现单独选中折叠效果
2020-07-30 13:37
1091 查看
1,html中
<section *ngFor="let item of getshopList"> <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="item.isShow" (click)="isShowtaggle(item)"> </ion-icon> <ion-icon name="chevron-down-outline" class="down-gray" item-right *ngIf="!item.isShow" (click)="isShowtaggle(item)"> </ion-icon> </div> <div class="middle-order-title"><span>{{item.categoryName}}</span></div> <div class="middle-order-null"></div> <div class="middle-order-detail"><span>查看全部</span></div> </div> </ion-item> <ion-list *ngIf="item.isShow"> <div class="order-alert"> <div class='item-small' *ngFor="let it of item.level2"> <span> {{it.categoryName}}</span> </div> </div> </ion-list> </section>
2,ts中
getListBymemberid() { const goodsReq = { // storeId:'0' } this.rest.apiPost(goodsReq, this.rest.getListBymemberid).subscribe(res => { const { status, msg, data } = res; if (status == 200) { console.log("店铺商品自定义分类"); console.log(data); let list = res.data; //加入isShow list.forEach(item => { item.isShow=false;//判断 }); this.getshopList = list; this.selectedId = res.data.id; } else { console.log("请求失败"); } }); } //切换方法 isShowtaggle(item) { item.isShow = !item.isShow; }
3,效果
相关文章推荐
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- vue点击某条数据,实现显示明细,点击隐藏,点击显示,折叠效果
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载
- Tips:AccordionExtender中的DataTable数据绑定/点击特定元素出发折叠效果
- 一个不错的实现折叠效果的方法
- js小技巧 js实现折叠效果
- 在框架中,可以实现折叠框架效果代码
- asp.net弹出层效果,遮盖背景的最好!能实现在弹出层上操作数据(比如登陆)
- 打造超酷的PHP数据饼图效果实现代码
- Android自定义button的实现,未选中,按下,选中效果
- Tips:AccordionExtender中的DataTable数据绑定/点击特定元素出发折叠效果
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- Asp.net Treeview 客户端选中效果实现 (初级)
- 在pb数据窗口实现选中多行数据
- wpf中实现数据的逐条加载显示效果
- Exce折叠效果(数据-组合)
- DIV遮罩层--数据缓冲效果的实现
- css实现会折叠、展开的菜单导航栏效果
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 使用XMLHTTP 获取服务器数据,实现无刷新效果