路由音乐切换
来源：互联网 发布：单片机地址寄存器 编辑：程序博客网 时间：2024/06/05 20:41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script>
angular.module("myApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.when("/:type", {
templateUrl: "table.html",
controller: "demoC"
}).otherwise({
redirectTo:"/经典老歌"
})
}).controller("demoC", function($scope, $routeParams,$filter,$http) {
var type = $routeParams.type;//分类
$http.get('sings.json').success(function(data) {
//获取json中的数据
$scope.datas = data;
//创建数组过滤器
var $f=$filter("filter");
//过滤数据,根据选择的类别,进行对应显示
$scope.sings=$f(data,{type:type});
}).error(function() {
alert("an unexpected error ocurred!");
});
})
</script>
</head>
<body ng-app="myApp">
<nav>
类别:
<a href="#/经典老歌">经典老歌</a>
<a href="#/好听">好听</a>
</nav>
<div ng-view>
</div>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script>
angular.module("myApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.when("/:type", {
templateUrl: "table.html",
controller: "demoC"
}).otherwise({
redirectTo:"/经典老歌"
})
}).controller("demoC", function($scope, $routeParams,$filter,$http) {
var type = $routeParams.type;//分类
$http.get('sings.json').success(function(data) {
//获取json中的数据
$scope.datas = data;
//创建数组过滤器
var $f=$filter("filter");
//过滤数据,根据选择的类别,进行对应显示
$scope.sings=$f(data,{type:type});
}).error(function() {
alert("an unexpected error ocurred!");
});
})
</script>
</head>
<body ng-app="myApp">
<nav>
类别:
<a href="#/经典老歌">经典老歌</a>
<a href="#/好听">好听</a>
</nav>
<div ng-view>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------
table表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr td{
border-bottom: 1px solid;
margin: 1px;
}
</style>
</head>
<body>
<table>
<thead>
</thead>
<tr>
<td><input type="checkbox"/></td>
<td>全选</td>
<td colspan="2"><input type="button" value="播放选中的歌曲" /></td>
<td>播放</td>
<td>歌词</td>
<td>下载</td>
</tr>
<tr ng-repeat="s in sings" >
<td><input type="checkbox"/></td>
<td> {{$index+1 }}</td>
<td>{{s.sname}}</td>
<td>{{s.author}}</td>
<td><a href="play_music.html">播放</a></td>
<td>歌词</td>
<td>下载</td>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- 路由音乐切换
- 路由切换
- [vue.js音乐App开发记录]vue2.0通过二级路由实现页面切换
- angularjs 路由切换
- AngularJs路由切换
- 路由-标签切换
- 路由+标签切换
- 路由切换及播放
- Ionic路由切换
- 路由路由脚本自动切换网关
- 无线路由之切换连接
- AngularJS使用路由切换视图
- Aagularjs路由切换跳转页面
- 路由-标签切换格式1
- 路由-标签切换格式2
- android仿音乐引用锁屏切换音乐歌曲壁纸
- Unity实现 场景切换 音乐不断
- C语言切换壁纸和播放音乐
- springboot使用generator-mybatis插件自动生成mybatis文件
- 第11周 第三项 数据结构例程——图的遍历
- 自定义三级联动地址选择器
- WebSocket发送文字图片功能
- android wifi 的链接
- 路由音乐切换
- DARLA 源码解析
- imooc的疯狂的蚂蚁的课程《Python操作MySQL数据库》 python3+pymysql模块来操作mysql数据库
- 第13周项目1- 验证算法(3)
- 无限轮播
- 云星数据---Scala实战系列(精品版)】：Scala入门教程007-Scala数组详解006
- 第十二周项目一C/C++验证算法
- RN入门-新建rn项目
- Tp day 2
