一、表格按照表头排序
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情况。
三、运行截图
