javascript - 如何纠正AngularJS中的分页

Question

我有以下代码，我的页面位置 1 未显示数据。它从第 2 页开始..我不知道...我尝试了最后 3 个小时但没有成功我是 angularjs 的新手，这就是为什么我在这里请帮助我...代码在下面...

/HTML

 <table class="table table-hover" aria-describedby="dataTables-example_info" role="grid" class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example">
       <thead>
       <tr role="row">

   <th style="width: 360px;" colspan="1" rowspan="1">Class</th>
                                                    <th style="width: 360px;" colspan="1" rowspan="1">Section</th>
                                                    <th style="width: 260px;" colspan="1" rowspan="1">Edit Subjects</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="info in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
                                                   <td>{{info.class_name}}</td>
                                                    <td>{{info.section_name}}</td>                                                   

                                                   <td> <button ng-click="moreinformation(info)" type="button" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i></td>


                                                </tr>
                                            </tbody>
                                            </table>
                                            <ul class="pagination"> 
             <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
                            <a  ng-click="prevPage()">« Prev</a>
                        </li>
            <li  ng-repeat="n in range(totalItems)"
                            ng-class="{active: n == currentPage}"
                            ng-click="setPage()">
                         <a href ng-bind="n + 1"></a>
                        </li>

             <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
                            <a  ng-click="nextPage()">Next »</a>
                        </li>
       </ul>

//JS 代码...

 $scope.itemsPerPage =10;      
     $scope.currentPage = 0;
      $scope.totalItems = $scope.data.length / 10 ;
           $scope.data = [{ "class_name": "CLASS1", "section_name":"A" }, { "class_name": "CLASS2", "section_name": "A" }];
       $scope.prevPage = function () {
                            if ($scope.currentPage > 0) {
                                $scope.currentPage--;
                            }
                        };
                        $scope.nextPage = function () {
                            console.log($scope.totalItems);
                            if ($scope.currentPage < $scope.totalItems - 1) {
                                $scope.currentPage++;
                            }
                        };        
           $scope.setPage = function () {
                                console.log(this.n);
                                if (this.n == 0)
                                {
                                  //  this.n = 1;
                                    $scope.currentPage++;
                                }
                                else
                                {
                                    $scope.currentPage = this.n;
                                }

                            };

                            $scope.range = function (start, end) {
                                var ret = [];
                                if (!end) {
                                    end = start;
                                    start = 0;
                                }
                                for (var i = start; i < end; i++) {
                                    ret.push(i);
                                }

                                return ret;
                            };

Answer 1

this.n在你的setPage函数始终绑定(bind)到默认值(如 n )，它并不关心您设置 n+1绑定(bind)到<a>元素，此绑定(bind)仅影响 <a>元素内部文本。

因此，要实现此目的，您可以将所需的值发送到您的 setPage处理程序，如下所示:

ng-click="setPage(n + 1)"

在 JS 中是这样的:

$scope.setPage = function (n) {
    $scope.currentPage = n;
};