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 按照表头字段排序功能（升序和降序）相关推荐

java8 使用stream进行排序(多字段排序、升序、降序)
文章包含"标题"."发布时间"."是否推荐"."是否置顶"四个属性. import lombok.AllArgsCons ...
python 字段升序,python 根据两个字段排序, 一个升序, 一个降序
SSL双向认证java实现(转) 本文通过模拟场景,介绍SSL双向认证的java实现默认的情况下,我认为读者已经对SSL原理有一定的了解,所以文章中对SSL的原理,不做详细的介绍. 如果有这个需要, ...
java列表排序sort_java list(java list排序sort升序、降序)
javalist List是Java中比较常用的调集类,关于List接口有许多完成类,本文就来简略介绍下其间几个重点的完成ArrayList.LinkedList和Vector之间的联系和差异. Li ...
java8新特性：对map集合排序，根据key或者value操作排序（升序、降序）
java8新特性:对map集合排序,根据key或者value操作排序(升序.降序) 直接上代码: package com.drew.test; import java.util.List; impor ...
SQL Server 使用ORDER BY 关键字进行排序（升序、降序、多个字段排序）
1 使用详解 ORDER BY关键字说明:用于对结果集按照一个列或者多个列进行排序.默认按照升序排序.降序使用 DESC 关键字,升序使用ASC关键字. 语法: SELECT * FROM tabl ...
php表格单元格怎么实现排序,angularjs,_angular表格点击序号进行升序，降序排序，怎么实现。，angularjs - phpStudy...
angular表格点击序号进行升序,降序排序,怎么实现. 序号内容姓名地点时间序号 {{$index + 1}}{{$index + 1}}{{$index + 1}}{{$index + 1}}{{ ...
js数组去重排序（升序、降序、随机）方法
js原生去重排序 var hhl = [1, 5, 6, 3, 2, 7, 6, 1, 5, 4, 8, 6, 9]var newArr = [];//创建一个新数组var isRepeat = fa ...
python中的排序（升序和降序）
用sort实现升序和降序 lst1=[10,20,40,5]#升序排序 lst1.sort()lst=sorted(lst1) #sorted会产生新的一个列表#降序排序 lst1.sort(reve ...
Sql Server 中 Order by排序（升序，降序）
--AddTime 升序,ID 升序 select * from DS_Finance ORDER BY AddTime,ID; --AddTime 升序,ID降序 select * from DS_ ...

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

一、表格按照表头排序

二、备注

三、运行截图

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

最新文章

热门文章