使用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: '小哩',age: 27,score: 87},{name: '小欣',sex: '女',age: 28,score: 86},{name: '小白',age: 23,score: 97} ]; $scope.key = ''; }]); </script> </body> </html>