t0445064

<style>
    .arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid black;
    }

    .arrow-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid black;
    }
</style>
<script src="~/Scripts/ngcontroller.js"></script>
<div ng-app="myModule">
    <div ng-controller="myController">
        {{reverSort}}
        <table border="1">
            <thead>
                <tr>
                    <th ng-click="SortData('name')" >
                        name
                        <div  ng-class="getSortClass('name')"></div>
                    </th>
                    <th ng-click="SortData('dateofBirth')" >
                        dateofBirth
                        <div ng-class="getSortClass('dateofBirth')"></div>
                    </th>
                    <th ng-click="SortData('gender')" >
                        gender
                        <div ng-class="getSortClass('gender')"></div>
                    </th>
                    <th ng-click="SortData('salary')" >
                        salary
                        <div ng-class="getSortClass('salary')"></div>

                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="a in employees | orderBy: SortColumn:reverSort">
                    <td>{{a.name }}</td>
                    <td>{{a.dateofBirth | date:"yyyy/MM/dd" }}</td>
                    <td>{{a.gender }}</td>
                    <td>{{a.salary }}</td>
                </tr>
            </tbody>
        </table>

    </div>

</div>
 

var myApp = angular.module("myModule", []);

myApp.controller("myController", function ($scope) {

    var employees = [{
        name: "Ben", dateofBirth: new Date("November 23 1980")
        , gender: "Male", salary: 55000.788
    }
        , {
            name: "Dan", dateofBirth: new Date("November 23 1980")
            , gender: "Male", salary: 55000.788
        }
        , {
            name: "Sara", dateofBirth: new Date("May 05 1970")
            , gender: "FeMale", salary: 68000
        }
        , {
            name: "Mark", dateofBirth: new Date("August 15 1974")
            , gender: "Male", salary: 57000
        }
        , {
            name: "Pam", dateofBirth: new Date("October 27 1979")
            , gender: "FeMale", salary: 53000
        }];

    $scope.employees = employees;
    $scope.SortColumn = "name";
    $scope.reverSort = false;

    $scope.SortData = function (column) {
        
        $scope.reverSort = $scope.SortColumn === column ? !$scope.reverSort : false;
        $scope.SortColumn = column;
    };

    $scope.getSortClass = function (column) {
        
        if ($scope.SortColumn === column) {
            return $scope.reverSort ? "arrow-down" : "arrow-up";
        }

        return "";
    };

});