javascript - AngularJS pagination showing all items instead of page items -


i need paginate items. items shown instead of items current page.

controller:

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

here plnkr demo: http://plnkr.co/edit/tnf8j8h3igar3mac9yqf?p=preview

you aren't using paginated $scope property in ng-repeat. you're using $scope.bodynews, have set $scope.paged.bodynews items page:

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

so, change markup to:

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

working demo.


Comments