AngularJS 的小demo——表头排序+表格搜索(过滤器)
使用AngularJS简单实现表头排序和表格搜索的功能,效果如下:
点击表头中的一项,可以根据该列属性对数据进行排序:
程序如下:
- <!DOCTYPE html>
- <html lang="en" ng-app="a3_4">
- <head>
- <meta charset="UTF-8">
- <title>AngularJS 过滤器-表头排序+表格搜索</title>
- <style>
- body {font-size: 20px;}
- ul {list-style-type: none; width: 408px; margin: 0; padding: 0;}
- ul li {float: left; background-color: #999; border-bottom: 1px solid #DDD;}
- ul li:nth-child(2n) {background-color: #CCC;}
- ul .bold {font-weight: bold; cursor: pointer;}
- ul li span {width: 52px; float: left; padding: 10px 10px; text-align: center; color: #FFF;}
- ul li:first-child span:hover {background-color: #DDD; color: #999;}
- ul .focus {background-color: #ccc;}
- .form-control {padding: 10px 5px; outline: none; border: 1px solid #ABCDEF;}
- .form-control:focus {border-color: #999;}
- </style>
- </head>
- <body>
- <div ng-controller="c3_4">
- <div><input class="form-control" type="text" ng-model="key" placeholder="请输入姓名关键字"/></div>
- <br/>
- <ul>
- <li ng-class="{{bold}}">
- <span>序号</span>
- <span ng-click="title = 'name'; desc = !desc">姓名</span>
- <span ng-click="title = 'sex'; desc = !desc">性别</span>
- <span ng-click="title = 'age'; desc = !desc">年龄</span>
- <span ng-click="title = 'score'; desc = !desc">分数</span>
- </li>
- <li ng-repeat="stu in data | filter: {name: key} | orderBy: title : desc">
- <span>{{$index + 1}}</span>
- <span>{{stu.name}}</span>
- <span>{{stu.sex}}</span>
- <span>{{stu.age}}</span>
- <span>{{stu.score}}</span>
- </li>
- </ul>
- </div>
- <script src="../assets/angularjs/angular-1.3.0.js"></script>
- <script>
- var a3_4 = angular.module('a3_4', []);
- a3_4.controller('c3_4', ['$scope', function($scope) {
- $scope.bold = "bold";
- $scope.title = 'name';
- $scope.desc = 0;
- $scope.data = [
- {name: '小明', sex: '男', age: 24, score: 95},
- {name: '小哩', sex: '男', age: 27, score: 87},
- {name: '小欣', sex: '女', age: 28, score: 86},
- {name: '小白', sex: '女', age: 23, score: 97}
- ];
- $scope.key = '';
- }]);
- </script>
- </body>
- </html>