<!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>
4338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
