angularjs中的排序和过滤
Posted 陆漫漫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs中的排序和过滤相关的知识，希望对你有一定的参考价值。
页面效果：
说明：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>
以上是关于angularjs中的排序和过滤的主要内容，如果未能解决你的问题，请参考以下文章
angularjs中是否选择所有和$filter过滤orderBy排序
AngularJS 以编程方式从服务调用过滤器（按自定义过滤器排序）