Question

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

控制器：

addPart = function(partToAdd) {
    self.mission().parts(ko.utils.arrayMap(partToAdd, function (part) {
        return new Part(part);
    });
}

    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)
          }
        });

    });

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

Answer 1

您未使用$scope中的分页ng-repeat媒体资源。您使用的是$scope.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">

Working demo.

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

1 个答案: