路由切换及播放
来源：互联网 发布：2017苹果10月份mac 编辑：程序博客网 时间：2024/06/04 00:40
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("app",["ngRoute"]).config(function($routeProvider){
$routeProvider.when("/:type",{
templateUrl:"table.html",
controller:"mc"
}).otherwise({
redirectTo:"/经典老歌"
});
})
.controller("mc", 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="app">
<nav>
<a href="#/经典老歌">经典老歌</a>
<a href="#/好听">好听</a>
</nav>
<div style="width: 300px; height: 200px; background: yellow;" ng-view>
</div>
</body>
</html>
table.html
<!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="{{s.spath}}">播放</a></td>
<td>歌词</td>
<td>下载</td>
</tr>
</table>
</body>
</html>
json
[{"sname":"富士山下","author":"陈奕迅","spath":"music/fssx.mp3","type":"经典老歌"},
{"sname":"刚刚好","author":"薛之谦","spath":"music/ggh.mp3","type":"经典老歌"},
{"sname":"后会无期","author":"徐良","spath":"music/hhwq.mp3","type":"好听"},
{"sname":"犯贱","author":"徐良","spath":"music/fj.mp3","type":"好听"}
]
- 路由切换及播放
- 路由切换
- iOS 音频播放时听筒及扬声器切换
- iOS 音频播放时听筒及扬声器切换
- AnimationDrawable监听播放结束及ImageSwitcher动画图片切换，带动画
- 路由播放器
- angularjs 路由切换
- AngularJs路由切换
- 路由-标签切换
- 路由+标签切换
- Ionic路由切换
- 路由音乐切换
- 路由路由脚本自动切换网关
- 图片循环切换播放
- 无线路由之切换连接
- AngularJS使用路由切换视图
- Aagularjs路由切换跳转页面
- 路由-标签切换格式1
- POJ 3026 Borg Maze
- lua去掉字符串中的空格
- python入门弱智题目
- 分布式事务XA
- 推箱子
- 路由切换及播放
- windows内存结构(1)
- 创建类student和对象
- 分享一个MAC下绕开百度网盘限速下载的方法，三步操作永久生效
- 类和对象
- DEX 文件格式图解
- Banner轮播图的使用
- SSM 封装base(一) 公用增删查改
- angularJs作用域
