<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script> var myapp = angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.data=[{ "name":"zs", "age":"20", "sex":"boy", "salary":"15000" },{ "name":"ls", "age":"22", "sex":"boy", "salary":"13000" },{ "name":"ww", "age":"18", "sex":"girl", "salary":"12000" }]; $scope.sortColumn = "name"; //设置点击排序方法 $scope.sort = function (column) { if($scope.sortColumn==column){ $scope.revers=!$scope.revers; }else{ $scope.sortColumn=column; } } }); </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <input type="text" ng-model="search"> <table> <thead> <tr> <th ng-click="sort('name')">姓名</th> <th ng-click="sort('age')">年龄</th> <th ng-click="sort('sex')">性别</th> <th ng-click="sort('salary')">薪资</th> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:{name:search}|orderBy:sortColumn:revers"> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td>{{item.salary}}</td> </tr> </tbody> </table> </body> </html>
angular js 利用filter进行排序
最新推荐文章于 2023-04-22 13:36:29 发布