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

一、表格按照表头排序

 <!doctype html>
 <html ng-app="a3_4">
 <head>
     <title>表头排序</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

 </head>
 <body>
 <div ng-controller="c3_4">
     <table class="table table-responsive" >
         <thead>
             <tr>
                 <th >序号</th>
                 <th ng-click="title='name';desc=!desc">
                     姓名
                     <span>
                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
                     </span>
                 </th>
                 <th ng-click="title='sex';desc=!desc">
                     性别
                      <span>
                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
                     </span>
                 </th>
                 <th ng-click="title='age';desc=!desc">
                     年龄
                      <span>
                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
                     </span>
                 </th>
                 <th ng-click="title='score';desc=!desc">
                     分数
                      <span>
                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>
                      </span>
                 </th>
             </tr>
         </thead>

         <tbody>
             <tr ng-repeat="stu in data | orderBy : title : desc">
                 <td>{{$index+1}}</td>
                 <td>{{stu.name}}</td>
                 <td>{{stu.sex}}</td>
                 <td>{{stu.age}}</td>
                 <td>{{stu.score}}</td>
             </tr>
         </tbody>

     </table>

 </div>
 <script type="text/javascript">
     var a3_4 = angular.module('a3_4', []);
     a3_4.controller('c3_4', ['$scope', function ($scope) {
         $scope.bold = "bold";
         $scope.title = 'score';
         $scope.desc = 0;
         $scope.data = [
             { name: "张明明", sex: "女", age: 24, score: 95 },
             { name: "李清思", sex: "女", age: 27, score: 87 },
             { name: "刘小华", sex: "男", age: 28, score: 86 },
             { name: "陈忠忠", sex: "男", age: 23, score: 97 }
         ];

     }])
 </script>
 </body>
 </html>

二、备注

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

三、运行截图