AngularJS table 按照表头字段排序功能（升序和降序）

 一、表格按照表头排序

 1 <!doctype html>
 2 <html ng-app="a3_4">
 3 <head>
 4     <title>表头排序</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 7     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 8 
 9 </head>
10 <body>
11 <div ng-controller="c3_4">
12     <table class="table table-responsive" >
13         <thead>
14             <tr>
15                 <th >序号</th>
16                 <th ng-click="title='name';desc=!desc">
17                     姓名
18                     <span>
19                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
20                     </span>
21                 </th>
22                 <th ng-click="title='sex';desc=!desc">
23                     性别
24                      <span>
25                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
26                     </span>
27                 </th>
28                 <th ng-click="title='age';desc=!desc">
29                     年龄
30                      <span>
31                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
32                     </span>
33                 </th>
34                 <th ng-click="title='score';desc=!desc">
35                     分数
36                      <span>
37                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
38                      </span>
39                 </th>
40             </tr>
41         </thead>
42 
43         <tbody>
44             <tr ng-repeat="stu in data | orderBy : title : desc">
45                 <td>{{$index+1}}</td>
46                 <td>{{stu.name}}</td>
47                 <td>{{stu.sex}}</td>
48                 <td>{{stu.age}}</td>
49                 <td>{{stu.score}}</td>
50             </tr>
51         </tbody>
52 
53     </table>
54 
55 </div>
56 <script type="text/javascript">
57     var a3_4 = angular.module('a3_4', []);
58     a3_4.controller('c3_4', ['$scope', function ($scope) {
59         $scope.bold = "bold";
60         $scope.title = 'score';
61         $scope.desc = 0;
62         $scope.data = [
63             { name: "张明明", sex: "女", age: 24, score: 95 },
64             { name: "李清思", sex: "女", age: 27, score: 87 },
65             { name: "刘小华", sex: "男", age: 28, score: 86 },
66             { name: "陈忠忠", sex: "男", age: 23, score: 97 }
67         ];
68 
69     }])
70 </script>
71 </body>
72 </html>

二、备注

备注：该方法主要是实现了表格按照表头字段进行排序功能，可升序排列，也可以降序排列，默认情况下是升序排列即 $scope.desc = 0情况。

三、运行截图

 

 

posted @ 2018-09-26 09:34  小小飞郭  阅读(2476)  评论(0)  编辑  收藏  举报