18.自定义过滤器表头排序

效果图：

排序了姓名：

排序了年龄：

 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>

View Code

<!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>