angular 选中切换面板
此方法采用的是没有路由的方式;
html5 代码:
<div [hidden]="flag">
<li class="music-list-datails">热门</li>
<li class="music-list-datails" *ngFor="let c of category" [class.selected]="c === selectedc" (click)="onSelect(c)">{{c.category_name}}</li>
</div> <div *ngIf="selectedc">
<li class=" swiper-slide music-list-datails " (click)="goback()">返回上一级</li>
<li class="swiper-slide music-list-datails " *ngFor="let audio of selectedc ">{{audio.tag_name}}</li>
</div>
ts代码:
ts代码:
errorMessage: string;
category: Category[];
selectedc: Tag[];
flag;
constructor(private fmService: FMService, private location: Location) { }
ngOnInit() {
this.getCategoryList();
}
getCategoryList() {
this.fmService.getCategoryList().then(
category => {
this.category = category;
},
error => this.errorMessage = <any>error
)
} onSelect(c): void {
this.fmService.getAudiobook(c.id).then(
tag => {
this.selectedc = tag;
this.flag = true;
},
error => this.errorMessage = <any>error
)
}
angular 选中切换面板的更多相关文章
- 使用angular路由切换后 轮播以及iscrollJs失效的问题
我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...
- js面向对象实现切换面板
js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
- Angular——tab切换案例
基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...
- 全选、取消、2级 checkbox的选中切换
需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...
- GUI记事本+切换面板1.1版
package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...
- jq切换面板
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 关于JqueryEasyUI插件—Tab,默认选中某个面板 如果不明显指定的话,第一个就是被选中的
如果不明显指定的话,第一个就是被选中的,你可以通过data-options="selected:true"指定默认选中
随机推荐
- .net 4.5 webform 提取ModelState错误信息
.net4.5以后,webform也可以使用模型绑定和模型验证. user实体: public class User { [Required] [Display(Name = "用户ID&q ...
- 如何用Visio画venn(维恩)图
今天需要换几个Venn(维恩)图,按照以前的套路是用画图工具来画的,但是这次不是画给自己看,并且也要很迅速的画好,那就迅速的来学习了. 参考网址:https://support.office.com/ ...
- java 连接 postgresql
最近公司用postgresql这个数据库,看网上说这个数据库还算好用,自己就用了一下,我就是用java连接了一下数据库. 其实每个数据库的连接方式大致相同,只是用到的驱动不同,用不同数据库只需要换不同 ...
- JAVA定时任务调度之Timer入门详解(一)
所谓的Timer,打开jdk的api文档可以看到它的定义:一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.通俗点讲就是说:有且仅有一个后台线程对多个业务线程进行 ...
- Linux redhat ICE环境安装
1.安装64位redhat6.4操作系统(客户机为64位)为软件开发工作站模式. 2.卸载yum源,重新安装为免费的CentOS6.4 yum源(yum能解决软件安装中的包依赖问题,redhat 未注 ...
- MYSQL数据库表按月备份,滚动,保留6次备份
要求: 每月1日0点:在不影响业务的情况下,备份整月的数据,保留6次备份. 思路: 基于MYSQL事件功能,每月按时完成操作 RENAME语句具有原子性,新旧表无缝切换 RENAME语句仅修改表定义, ...
- [转载]linux修改open files数
概要:linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不够.这就需要修改ulimit和file-m ...
- 【读书笔记】【深入理解ES6】#10-改进的数组功能
创建数组 在ES6之前,创建数组的方式主要有两种: 调用 Array 构造函数 用数组字面量语法 为了简化数组的创建过程,ES6新增了两个方法: Array.of() Array.from() Arr ...
- 微信小程序之两个页面传值
需求:发送页面点击某一个元素之后,获取该元素的属性值,然后把这些属性值传到接收页面中. 思路:获取当前点击元素的索引,就能获取当前元素的值,然后通过跳转的 url 地址传递值 还是整个完整的例子吧: ...
- equals和hashcode重写的问题
public static void main(String[] args) { Set<Test> set = new HashSet<>(); Test t1 = new ...