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"指定默认选中
随机推荐
- Lucene.net(4.8.0) 学习问题记录三: 索引的创建 IndexWriter 和索引速度的优化
前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...
- CentOS7下安装MySQL并配置远程连接
一.CentOS7下安装MySQL数据库 CentOS7默认的安装包里面已经没有 MySQL-Server安装包了,远程镜像中也没有了. 默认的是MariaDB (MySQL的一个分支,开发这个分支的 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [Spark性能调优] 第三章 : Spark 2.1.0 中 Sort-Based Shuffle 产生的内幕
本課主題 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...
- web页面接入QQ客服的方法
在做微信二次开发的时候或者手机版网页的时候有人想在接qq客服,下面我就分享一下具体操作: 1,准备一个QQ号,可以是企业QQ,也可以是个人QQ.登录网址:http://shang.qq.com/wid ...
- Qt5.3.1 OpenCV2.4.9 开发环境配置
首先是将我们需要的三个软件安装:分别是OpenCV2.4.9.QT5.3.1 .Cmake3.0.2 一定要使用Cmake3.0.2编译OpenCV2.4.9 其他版本的不一定能编译成功!!!! A. ...
- cyclictest 简介
1. cyclictest 简介以及安装 1.1 cyclictest 简介 cyclictest 是什么? 看名字应该就能大致猜出来它是一种 test 程序,Cyclictest的维基主页这么介绍它 ...
- Zabbix实战-简易教程(1)--总流程
序 玩zabbix已经几年了,一直想分享一些相关的使用经验和心得,但是总以各种借口而拖延,最近准备重新整理,记录一些实际工作环境中的示例,一方面希望能够帮助正在学习或者正在寻找这方面资料的朋友,另一方 ...
- 关于构造函数和原型prototype对象的理解
构造函数 1.什么是构造函数 构造函数,主要用于对象创建的初始化,和new运算符一起用于创建对象,一个类可以有多个构造函数,因为函数名相同,所以只能通过参数的个数和类型不同进行区分,即构造函数 ...
- flask设置配置文件的四钟方式
# -*- coding: utf-8 -*- DEBUG = True # -*- coding: utf-8 -*- from flask import Flask,session,current ...