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"指定默认选中
随机推荐
- python科学计算_numpy_ndarray
ndarray:n-dimensional array object,即多维数组对象,是python自带的array对象的扩展,array对象和list对象的区别是array对象的每一个元素都是数值, ...
- commons-dbutils 字段名称转换
我们在写bean的时候,字段通常都使用小驼峰命名法,但是在设计数据库时,一般使用下划线分割命名.这样,在取出数据库字段时,还需要转换.如何简洁的实现这种转换呢? 你能遇到的问题,只要是普遍存在的,大家 ...
- Robot Framework学习笔记(五)------Collections 库
Collections 库同样为 Robot Framework 标准类库,它所提供的关键字主要用于列表.索引.字典的处理. 1.添加类 在使用之前需要在测试套件(项目)中添加 2.创建字典 字典也是 ...
- 对vuex的认识和简单理解
vuex概述 Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 但如果是简单的应用 ,就没有必要 ...
- textarea显示源代码
textarea显示源代码 近期做的项目中,有需要显示源码的效果 最开始使用了很多冗余的办法,使用<pre></pre>和<code></code>标签 ...
- ssh的免密登陆
想必大家都有使用ssh登陆的过程了,那么,怎么设置ssh免密登陆呢?下面有一些我的总结: 环境:服务器主.从 主服务器:192.168.1.1 从服务器:192.168.1.2 实现主服务器ssh登录 ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- Java学习笔记21(String类补充:正则表达式)
正如python的re模块,不过Java和Python的正则表达式有一些区别,这里做简单介绍,具体的细节可以参考网上其他的文章: 功能:可以用于检验一个字符串,比如验证用户名,验证密码格式,验证是否是 ...
- ADO对SQL Server 2008数据库的基础操作
最近在学习ADO与数据库的相关知识,现在我将自己学到的东西整理写出来,也算是对学习的一种复习. 这篇文章主要说明如何遍历某台机器上所有的数据库服务,遍历某个服务中所有的数据库,遍历数据库中的所有表以及 ...
- Linux常用命令之文件处理命令
注:由于Linux操作系统有些目录不能轻易操作,特此建议大家在家目录home,或root.tmp目录下练习命令,以免带来不必要的损失 一.查询目录中的内容:ls 命令格式:ls [选项] [文件或目录 ...