效果图：
排序了姓名：
排序了年龄：
1 <!DOCTYPE html>
2 <html ng-app="myApp" ng-controller="myCtrl" >
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>T73-自定义过滤器表头排序</title>
6 <script src="js/angular.js" type="text/javascript"></script>
7 <style type="text/css">
8 table{
9 text-align: center;
10 font: 22px 宋体;
11 color:orange;
12 }
13 thead{
14 cursor: pointer;
15 }
16 </style>
17
18 </head>
19 <body>
20
21 <table>
22 <thead>
23 <tr>
24 <th>序号</th>
25 <th ng-click="title='name';desc=!desc">姓名</th>
26 <th ng-click="title='age';desc=!desc">年龄</th>
27 <th ng-click="title='sex';desc=!desc">性别</th>
28 <th ng-click="title='score';desc=!desc">分数</th>
29 </tr>
30 </thead>
31 <tbody>
32 <tr ng-repeat="stu in data | orderBy:title:desc">
33 <td>{{$index+1}}</td>
34 <td>{{stu.name}}</td>
35 <td>{{stu.age}}</td>
36 <td>{{stu.sex}}</td>
37 <td>{{stu.score}}</td></tr>
38 </tbody>
39 </table>
40
41 </body>
42
43 <script type="text/javascript">
44 angular.module("myApp",[])
45 .controller("myCtrl",["$scope", function ($scope) {
46 $scope.data=[
47 {name:"张三",sex:"女",age:24,score:95},
48 {name:"阿甘",sex:"女",age:27,score:87},
49 {name:"王五",sex:"男",age:28,score:86},
50 {name:"BOBO",sex:"男",age:23,score:97}
51 ];
52 $scope.title='name';
53 $scope.desc=0;
54 }])
55
56
57
58
59 </script>
60
61 </html>
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl" >
<head lang="en">
<meta charset="UTF-8">
<title>T73-自定义过滤器表头排序</title>
<script src="js/angular.js" type="text/javascript"></script>
<style type="text/css">
table{
text-align: center;
font: 22px 宋体;
color:orange;
}
thead{
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th ng-click="title='name';desc=!desc">姓名</th>
<th ng-click="title='age';desc=!desc">年龄</th>
<th ng-click="title='sex';desc=!desc">性别</th>
<th ng-click="title='score';desc=!desc">分数</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stu in data | orderBy:title:desc">
<td>{{$index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.score}}</td></tr>
</tbody>
</table>
</body>
<script type="text/javascript">
angular.module("myApp",[])
.controller("myCtrl",["$scope", function ($scope) {
$scope.data=[
{name:"张三",sex:"女",age:24,score:95},
{name:"阿甘",sex:"女",age:27,score:87},
{name:"王五",sex:"男",age:28,score:86},
{name:"BOBO",sex:"男",age:23,score:97}
];
$scope.title='name';
$scope.desc=0;
}])
</script>
</html>