<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr td {
border-bottom: 1px solid;
margin: 1px;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script>
angular.module("myApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.when("/:path",{
templateUrl: "play_music.html",
controller: "demoA"
})
}).controller("demoC", function($scope, $http) {
$http.get('sings.json').success(function(resp) {
$scope.sings=resp;
})
}).controller("demoA",function($scope,$routeParams){
$scope.path=$routeParams.path;
});
</script>
</head>
<body ng-app="myApp" ng-controller="demoC">
<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>
<div ng-view></div>
</body>
</html>
=========================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio controls="controls" autoplay >
<source src={{path}}></source>
您的瀏覽器暫時不支持mp3個,ogg格式音頻文件
</audio>
</body>
</html>
=======================
json串
[{"sname":"夜夜夜","author":"齊秦","spath":"#/aa.mp3","type":"經典老歌"},
{"sname":"執着","author":"田震","spath":"#/bb.mp3","type":"經典老歌"},
{"sname":"他一定很愛你","author":"阿杜","spath":"#/cc.mp3","type":"經典老歌"},
{"sname":"別","author":"薛之謙","spath":"#/aa.mp3","type":"好聽"},
{"sname":"放開","author":"朱麗葉","spath":"#/aa.mp3","type":"好聽"}
]