使用AngularJS的過濾器，可以很容易的實現在表格中，點擊某一列標題進行排序，實現過程如下：
html代碼：
<table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';desc=!desc">name</th> <!-- 當點擊列標題時，執行click事件，將排序條件反轉，即，如果原來是升序則將按降序，降序亦如此 --> <th ng-click="col='gender';desc=!desc">gender</th> <th ng-click="col='age';desc=!desc">age</th> <th ng-click="col='score';desc=!desc">score</th> </tr> </thead> <tbody> <tr ng-repeat="d in data|orderBy:col:desc"> <td ng-bind="$index+1"></td> <td ng-bind="d.name"></td> <td ng-bind="d.gender"></td> <td ng-bind="d.age"></td> <td ng-bind="d.score"></td> </tr> </tbody></table>
js代碼：
var app = angular.module('myapp', []);app.controller('orderByCtrl', function($scope) { $scope.col = 'name';//默認按name列排序 $scope.desc = 0;//默認排序條件升序 $scope.data = [{ name: 'name 1', gender: 'male', age: 26, score: 70 }, { name: 'name 2', gender: 'female', age: 24, score: 84 }, { name: 'name 3', gender: 'male', age: 20, score: 76 }, { name: 'name 4', gender: 'female', age: 22, score: 64 }];})讓運行界面好看些，使用了bootstrap.min.css樣式庫。為了交互性考慮，在表頭增加了手指樣式
th { cursor: pointer;}以上所述是小編給大家介紹的妙用Angularjs實現表格按指定列排序，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
