<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/tm.pagination.js"></script>
<style>
    .page-list .pagination {
        float: left;
    }

        .page-list .pagination span {
            cursor: pointer;
        }

        .page-list .pagination .separate span {
            cursor: default;
            border-top: none;
            border-bottom: none;
        }

            .page-list .pagination .separate span:hover {
                background: none;
            }

    .page-list .page-total {
        float: left;
        margin: 25px 20px;
    }

        .page-list .page-total input, .page-list .page-total select {
            height: 26px;
            border: 1px solid #ddd;
        }

        .page-list .page-total input {
            width: 40px;
            padding-left: 3px;
        }

        .page-list .page-total select {
            width: 50px;
        }
</style>
<div ng-app="DemoApp" ng-controller="DemoController">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>ID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Status</td>
                <td>Address</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="emp in persons">
                <td>{{$index+1}}</td>
                <td>{{emp.Name}}</td>
                <td>{{emp.Num}}</td>
                <td>{{emp.Sex}}</td>
            </tr>
        </tbody>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
    var app = angular.module('DemoApp', ['tm.pagination']);

    app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {

        var GetAllEmployee = function () {

            var postData = {
                pageIndex: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            }

            BusinessService.list(postData).success(function (response) {
                $scope.paginationConf.totalItems = response.count;
                $scope.persons = response.items;
            });

        }

        //配置分页基本参数
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 5
        };

        /***************************************************************
        当页码和页面记录数发生变化时监控后台查询
        如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。 
        ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }]);


    //业务类
    app.factory('BusinessService', ['$http', function ($http) {
        var list = function (postData) {
            return $http.post('/Employee/GetAllEmployee', postData);
        }

        return {
            list: function (postData) {
                return list(postData);
            }
        }
    }]);
</script>