<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

​

<div ng-app="lyweb" ng-controller="ctrlPige" >

​

    <div class="pagination">页数：{{nowNum}}/{{allNum}}</div>

    <div class="pagination">首页</div>

    <div id="pigeList">

​

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

        </ul>

​

    </div>

    <div class="pagination">末页</div>

    <div class="pagination" ng-click="pigePrevious()">上一页</div>

    <div class="pagination" ng-click="pigeNext()">下一页</div>

    <div ng-include="myhtml"></div>

</div>

var app = angular.module('lyweb',[]);

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

        $scope.nowNum = 0;

        $scope.allNum= 30;

        $scope.pige=1;

        $scope.pigePrevious=function(){

            $scope.pige-=1;

            if($scope.pige==0)$scope.pige=0;

            $scope.myhtml='t'+$scope.pige+'.html';

        };

        $scope.pigeNext=function(){

            $scope.pige+=1;

            if($scope.pige==30)$scope.pige=30;

            $scope.myhtml='t'+$scope.pige+'.html';

        };

​

    }]);

.cl{

    clear: left;

}

.pagination{

    float:left;

    border:1px solid #ccc;

    display:inline-block;

}

#pigeList{

    float:left;

    display:inline-block;

    border:1px solid #ccc;

}

#pigeList>ul{

    margin:0;

    padding:0;

}

#pigeList>ul>li{

    float:left;

    border:1px solid #ccc;

    list-style: none;

}

#pigeList>ul>li:nth-child(1),

#pigeList>ul>li:nth-child(2),

#pigeList>ul>li:nth-child(3),

#pigeList>ul>li:nth-child(4),

#pigeList>ul>li:nth-child(5){

    display:none;

}