當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/4/16 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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情況。

三、運行截圖

轉載于:https://www.cnblogs.com/mycnblogs-guoguo/p/9705073.html

總結

以上是生活随笔為你收集整理的AngularJS table 按照表头字段排序功能（升序和降序）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。