angular js 利用filter进行排序

来源：互联网发布：域名找回编辑：程序博客网时间：2024/06/15 22:26
<!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>
阅读全文
0 0