从WebAPI获取数据时如何在Angular JS中的ng-repeat中实现分页

时间:2019-03-20 13:02:54

标签: angularjs

嗨,我需要在ng-repeat中实现分页。我正在从webAPI获取数据..html和controller中的源代码如下。

我已经在控制器和.html页面中提到了ng-repeat的分页逻辑。但是该分页无法正常工作。请查看下面提供的源代码,并建议如何修复它。

控制器:

$http({
                        method: 'Post',
                        url: 'http://localhost:53583/api/Values/PostEmployeeData',
                        dataType: 'json',
                        data: $.param(empDetails),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).success(function (data) {

                        $scope.itemsPerPage = 5;
                        $scope.currentPage = 0;
                        $scope.object = [];

                        angular.module('ABC.Employer').filter('offset', function () {

                            return function (input, start) {
                                start = parseInt(start, 10);
                                return input.slice(start);
                            };
                        });

                        for (var i = 0; i < 10; i++) {

                            $scope.object.push(data[i]);
                        }

                        $scope.prevPage = function () {
                            if ($scope.currentPage > 0) {
                                $scope.currentPage--;
                            }
                        };

                        $scope.prevPageDisabled = function () {
                            return $scope.currentPage === 0 ? "disabled" : "";
                        };

                        $scope.pageCount = function () {
                            return Math.ceil($scope.items.length / $scope.itemsPerPage) - 1;
                        };

                        $scope.nextPage = function () {
                            if ($scope.currentPage < $scope.pageCount()) {
                                $scope.currentPage++;
                            }
                        };

                        $scope.nextPageDisabled = function () {
                            return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
                        };

.html

<table st-table="rowCollection"  ng-class="panel-body12" class="table table-striped">
        <thead>
                                   <tr>
                                       <th style="text-align:center">Name</th>
                                       <th style="text-align:center">Type</th>                                  
                                   </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="ob in object" offset: currentPage*itemsPerPage |limitTo: itemsPerPage">                                        
                                            <td><a style="text-align:center" data-ng-click="selectCall(ob.NAME,ob.Employer_Key,ob.Plan_key)">{{ob.NAME}}</a></td>
                                            <td style="text-align:center">{{ob.VALUE}}</td>                                                                             
                                    </tr>

                                </tbody>
                                <tfoot>
                                  <td colspan="3">
                                    <div class="pagination">
                                      <ul>
                                        <li ng-class="prevPageDisabled()">
                                          <a href ng-click="prevPage()">« Prev</a>
                                        </li>
                                        <li ng-repeat="n in range()"
                                          ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                                          <a href="#">{{n+1}}</a>
                                        </li>
                                        <li ng-class="nextPageDisabled()">
                                          <a href ng-click="nextPage()">Next »</a>
                                        </li>
                                      </ul>
                                    </div>
                                  </td>
                                </tfoot>
                          </table>

0 个答案:

没有答案