angularjs中的排序和過濾
阿新 • • 發佈：2017-05-13
text 方式 all lee -s 分享 $scope rep mode
頁面效果：
說明：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中的排序和過濾