<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ padding: 10px; border: 1px solid #000; } table{ border-collapse: collapse; } .red{ color: red; } </style> <script src="angular-1.5.5/angular.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.arr=[{ "name":"zs", "age":"20", "sex":"boy" },{ "name":"ls", "age":"22", "sex":"girl" },{ "name":"ww", "age":"18", "sex":"boy" },{ "name":"zl", "age":"26", "sex":"boy" }]; $scope.sort="name"; $scope.revers=false; $scope.sortFun=function(column){ if($scope.sort==column){ /* $scope.revers=true;*/ $scope.revers=!$scope.revers; } $scope.sort=column; }; $scope.getClass=function(column){ if($scope.sort==column){ return "red" } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <table> <thead> <td>ID</td> <td ng-click="sortFun('name')" ng-class="getClass('name')">name</td> <td ng-click="sortFun('age')" ng-class="getClass('age')">age</td> <td ng-click="sortFun('sex')" ng-class="getClass('sex')">sex</td> </thead> <tbody> <tr ng-repeat="item in arr|orderBy:sort:revers"> <td>{{$index}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> </tr> </tbody> </table> </body> </html>
09-22
03-28
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交