AngularJS分页显示所有项目而不是页面项目_JavaScript

我需要对一些物品进行分页。 显示所有项目，而不是仅显示当前页面的项目。

控制器：

    var app = angular.module('plunker', ['ui.bootstrap']);

    app.controller('MainCtrl', function($scope, $http) {

        $scope.currentPage = 1;
        $scope.itemsPerPage = 5;
        $scope.maxSize = 5;
        $scope.tickets = [];
        $scope.bodynews = [];
        var begin;
        var end;

        $http({method: 'GET', url: 'getNews.json'}).
        success(function(data, status, headers, config) {

            $scope.tickets = data;
            $scope.noOfPages =Math.floor($scope.tickets.news[0].allNews.length / $scope.itemsPerPage);
            for (i=0; i< $scope.tickets.news[0].allNews.length; i++){

                $scope.bodynews[i] =  $scope.tickets.news[0].allNews[i].bodyNews;

                }
                begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
                end = begin + $scope.itemsPerPage;

        }).
        error(function(data, status, headers, config) {

        });


        $scope.$watch('currentPage', function() {
          $scope.paged = {
            bodynews: $scope.bodynews.slice(begin, end)
          }
        });

    });

    <body ng-controller="MainCtrl">

        <div>{{noOfPages}} &nbsp; {{currentPage}} &nbsp; {{maxSize}}
            <pagination ng-model="currentPage" total-items="bodynews.length" items-per-page="5"></pagination>
        </div>
        <div class="alert alert-info" ng-repeat="tic in bodynews">
            {{tic}}
        </div>

    </body>

这是PLNKR演示： ://plnkr.co/edit/Tnf8j8h3igaR3mAc9Yqf?p=preview

您没有在ng-repeat使用分页的$scope属性。 您正在使用$scope.bodynews ，但已将$scope.paged.bodynews设置$scope.paged.bodynews的项目：

$scope.$watch('currentPage', function() {
  $scope.paged = {
    bodynews: $scope.bodynews.slice(begin, end)
  };
});

因此，将您的标记更改为：

<div class="alert alert-info" ng-repeat="tic in paged.bodynews">

AngularJS分页显示所有项目而不是页面项目

问题描述

1楼