页面效果:
说明:1.在输入框中输入姓名或年龄,可以对表格内的数据做过滤
2.点击姓名,可以对姓名字段做排序。排序方式可逆转。
3.点击年龄,可以对年龄字段做排序。排序方式可逆转。
代码实现:
<script> angular.module('myApp',[]) .controller('Aaa',['$scope','$filter',function($scope,$filter){ var oriArr = [ { name : "red" , age : "20" }, { name : "yellow" , age : "40" }, { name : "blue" , age : "30" }, { name : "green" , age : "10" } ]; $scope.dataList = oriArr; $scope.fnSort = function(arg){ arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg]; $scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] ); }; $scope.fnFilter = function(){ $scope.dataList = $filter('filter')( oriArr , $scope.filterVal ); }; }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" value="搜索"> <table border="1"> <tr> <th ng-click="fnSort('name')">姓名</th> <th ng-click="fnSort('age')">年龄</th> </tr> <tr ng-repeat="data in dataList"> <td>{{ data.name }}</td> <td>{{ data.age }}</td> </tr> </table> </div> </body>