18.自定义过滤器表头排序

效果图：

排序了姓名：

排序了年龄：

 1 <!DOCTYPE html>2 <html ng-app="myApp" ng-controller="myCtrl" >3 <head lang="en">4     <meta charset="UTF-8">5     <title>T73-自定义过滤器表头排序</title>6     <script src="js/angular.js" type="text/javascript"></script>7     <style type="text/css">8         table{9             text-align: center;
10             font: 22px 宋体;
11             color:orange;
12         }
13         thead{
14             cursor: pointer;
15         }
16     </style>
17
18 </head>
19 <body>
20
21 <table>
22     <thead>
23     <tr>
24         <th>序号</th>
25     <th ng-click="title='name';desc=!desc">姓名</th>
26     <th ng-click="title='age';desc=!desc">年龄</th>
27     <th ng-click="title='sex';desc=!desc">性别</th>
28     <th ng-click="title='score';desc=!desc">分数</th>
29     </tr>
30     </thead>
31     <tbody>
32     <tr ng-repeat="stu in data | orderBy:title:desc">
33         <td>{{$index+1}}</td>
34         <td>{{stu.name}}</td>
35         <td>{{stu.age}}</td>
36         <td>{{stu.sex}}</td>
37         <td>{{stu.score}}</td></tr>
38     </tbody>
39 </table>
40
41 </body>
42
43 <script type="text/javascript">
44     angular.module("myApp",[])
45             .controller("myCtrl",["$scope", function ($scope) {
46                 $scope.data=[
47                     {name:"张三",sex:"女",age:24,score:95},
48                     {name:"阿甘",sex:"女",age:27,score:87},
49                     {name:"王五",sex:"男",age:28,score:86},
50                     {name:"BOBO",sex:"男",age:23,score:97}
51                 ];
52                 $scope.title='name';
53                 $scope.desc=0;
54             }])
55
56
57
58
59 </script>
60
61 </html>

View Code

<!DOCTYPE html><html ng-app="myApp" ng-controller="myCtrl" ><head lang="en">    <meta charset="UTF-8">    <title>T73-自定义过滤器表头排序</title>    <script src="js/angular.js" type="text/javascript"></script>    <style type="text/css">        table{            text-align: center;            font: 22px 宋体;            color:orange;        }        thead{            cursor: pointer;        }    </style>

</head><body>

<table>    <thead>    <tr>        <th>序号</th>    <th ng-click="title='name';desc=!desc">姓名</th>    <th ng-click="title='age';desc=!desc">年龄</th>    <th ng-click="title='sex';desc=!desc">性别</th>    <th ng-click="title='score';desc=!desc">分数</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="stu in data | orderBy:title:desc">        <td>{{$index+1}}</td>        <td>{{stu.name}}</td>        <td>{{stu.age}}</td>        <td>{{stu.sex}}</td>        <td>{{stu.score}}</td></tr>    </tbody></table>

</body>

<script type="text/javascript">    angular.module("myApp",[])            .controller("myCtrl",["$scope", function ($scope) {                $scope.data=[                    {name:"张三",sex:"女",age:24,score:95},                    {name:"阿甘",sex:"女",age:27,score:87},                    {name:"王五",sex:"男",age:28,score:86},                    {name:"BOBO",sex:"男",age:23,score:97}                ];                $scope.title='name';                $scope.desc=0;            }])

</script>

</html>

转载于:https://www.cnblogs.com/mx2036/p/6744391.html

18.自定义过滤器表头排序相关推荐

Qt自定义点击表头排序，使支持恢复默认顺序
0.前言之前总结了 QTableView 实现排序 ,但是这里还有个问题,就是 Qt 默认的排序状态只有升序和降序,没法通过点击表头恢复到默认的顺序,他这个 SortOrder 宏也只有升序降序两个 ...
20190325 Django自定义过滤器和自定义模板标签
代码布局(死去活来) 自定义要先解决几个问题: 1). 在哪里定义,要将代码写在哪里? app目录下的名为templatetags的文件夹,必须叫这个名字.这个文件夹必须是一个python的包(pyt ...
springboot过滤字段_SpringBoot自定义过滤器的两种方式及过滤器执行顺序
第一种 @WebFilter + @ServletComponentScan 注解 1.首先自定义过滤器如下自定义过滤器 ReqResFilter必须实现 javax.servlet.Filter ...
过滤器获取service方法返回慢_Gateway：自定义过滤器
自定义局部过滤器需求:在application.yml中对某个路由配置过滤器,该过滤器可以在控制台输出配置文件中指定名称的请求参数的值. 在gateway-server模块中编写过滤器工厂类MyPa ...
flask第二十四篇——模板【6】自定义过滤器
请关注孟船长的公众号:自动化测试实战大家想了解其他过滤器可以参考这里: http://jinja.pocoo.org/docs/dev/templates/#builtin-filters ---- ...
重写Oracle的wm_concat函数，自定义分隔符、排序
oracle中,wm_concat函数是一个聚合函数,和mysql中的group_concat函数类似,不过group_concat函数比较强大,可以定义分隔符和排序,当然所谓强大是相对的,这里假使我 ...
Django中自定义过滤器的使用
我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...
Java基础-TreeSet与Java自定义类型的排序
TreeSet与Java自定义类型的排序演示TreeSet对String是可排序的 TreeSet无法对自定义类型进行排序比较规则怎么写自平衡二叉树结构实现比较器接口 Collections工 ...
ASPxGridViewHelper自定义多表头及合并单元格
举例1:自定义多表头,合并单元格 AspxGridview protected void Page_Load(object sender, EventArgs e){InitGrid();InitGr ...

18.自定义过滤器表头排序

18.自定义过滤器表头排序相关推荐

最新文章

热门文章