pai_paicsdn-CSDN博客

本文链接：https://blog.csdn.net/Mynamezhuang/article/details/78056853

<!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>