anjular 简单数据分页

纯前端分页，适合数据量少的简单数据

HTML 代码

<nav aria-label="Page navigation">
                        <ul class="pagination" >
                            <li>
                                <a href="#" aria-label="Previous" ng-click="Prevpage()">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li>
                                <a style="color:red;">{{selPage1}}</a>
                            </li>

                            <li>
                                <a href="#" aria-label="Next" ng-click="Nextpage()">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>

                        </ul>
                        <span class="PageCount">共<span class="page_color">{{ PageCount}}</span>页</span>
                    </nav>

js 代码

function page() {                
                $scope.selPage1 = 1;//当前页                           
                var numberpage = $scope.Range.length;//总条数
                $scope.PageCount = Math.ceil($scope.Range.length / 5);//总页数
                //debugger;                
                //首页显示数据
                $scope.Range = Totaldata.slice(0, 5);
                //下一页
                $scope.Nextpage = function () {
                    debugger;
                    if ($scope.selPage1 == $scope.PageCount) {
                        Help.alert("没有下一页，当前已经是最后一页");
                        //$scope.selPage1 = 1;
                    }
                    else {
                        $scope.selPage1 = $scope.selPage1 + 1;
                    }                    
                    $scope.Range = Totaldata.slice(5 * ($scope.selPage1 - 1), $scope.selPage1 * 5);
                }
                //上一页
                $scope.Prevpage = function () {
                    if ($scope.selPage1 == 1) {
                        Help.alert("没有上一页，当前已经是第一页");
                    }
                    else {
                        $scope.selPage1 = $scope.selPage1 - 1;
                    }
                    $scope.Range = Totaldata.slice(5 * ($scope.selPage1 - 1), $scope.selPage1 * 5);
                }
            }

调用方法

 $http.post("/Assessment/GetGymblueStreetTown")
              .then(function (result) {
              
                  $scope.tables1 = result.data;
               
                  page();
              });