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"指定默认选中
随机推荐
- jQuery实现表的编辑删除添加(增删改查)🌚
代码 : (用到了bootstrap里面的全局css样式和组件,毕竟一把梭.
- 用元类和__getattribute__改变类属性的读取方式
首先,需要知道两点: 类本身是type类的实例 __getattribute__ 可以改变类实例的属性的读取方式(http://www.cnblogs.com/blackmatrix/p/568148 ...
- Asp.Net MVC 身份验证-Forms
Asp.Net MVC 身份验证-Forms 在MVC中对于需要登录才可以访问的页面,只需要在对应的Controller或Action上添加特性[Authorize]就可以限制非登录用户访问该页面.那 ...
- css边框内圆角
一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜 ...
- Python:名片管理系统
字符串和列表学完, 自己试着写了一个非常简单的名片管理系统, 新萌尝试, 大佬们不要喷, 修改名片的功能我偷了个懒, 因为我不知道怎么通过定义下标,然后通过下标来修改列表内的字符串 我的思路是,把用户 ...
- [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动,并在win7上远程控制
楼主是资深技术宅(癖),由于感觉手上的老笔记本太卡,遂狠心买了个性能至强的主机同时配了个投影仪(满足躺着打代码的意淫场景).但是体验了大概一个月发现还是坐着打代码舒服,但是如下图坐着打代码总是要抬头看 ...
- C++继承分析
面向对象的三大特性之一就是继承,继承运行我么重用基类中已经存在的内容,这样就简化了代码的编写工作.继承中有三种继承方式即:public protected private,这三种方式规定了不同的访问权 ...
- web前端经典面试题大全及答案
阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...
- python函数高级特性
掌握了Python的数据类型.语句.函数,基本可以编写出很多有用的程序了.但是Python中,代码不是越多越好,而是越少越好.代码不是越复杂越好,而是越简单越好.基于这一思想,我们来介绍python中 ...
- hihoCoder #1053 : 居民迁移(贪心,二分搜索,google在线技术笔试模拟)
#1053 : 居民迁移 时间限制:3000ms 单点时限:1000ms 内存限制:256MB 描述 公元2411年,人类开始在地球以外的行星建立居住点.在第1326号殖民星上,N个居住点分布在一条直 ...