How to solve error in paging using AngularJS?

Question

I'm using AngularJS and here's my code:

Controller

$scope.totalItems = $scope.lists.length;
$scope.currentPage = 1;
$scope.numPerPage = 8;

$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.lists.indexOf(value);
    return (begin <= index && index < end);
}

Index

<pagination total-items="totalItems" ng-model="currentPage"
            max-size="5" boundary-links="true"
            items-per-page="numPerPage" class="pagination-sm">
</pagination>

Screenshot

enter image description here

My problem is that I want to display my data on different pages (paging), not on a single one.

How can I do that?

Update

for (var i = 0; i < 100; i++) {
  $scope.lists.push('To do ' + i);
}

@arman1991 im new in angular i dnt think i do understand your question — ninjaXnado, Jan 06 '15 at 12:34
I don't see where do you call the *$scope.paginate* function, neither in controller or HTML. You only initialize the function, you don't call it anywhere because it initialize the properties important for paging. — arman1991, Jan 06 '15 at 12:43
@arman1991 check my updated line of my code i just added that line and it does display those numbers but the problem is it does not display data — ninjaXnado, Jan 06 '15 at 13:03
Pagination directive doesn't display data, just the paging controls, you need to add a list( or something) to display it, using the bound data as a filter. — Mesh, Jan 06 '15 at 13:24
Here are your answers, I think that's a possible duplication... http://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs — arman1991, Jan 06 '15 at 13:29

score 0 · Answer 1 · answered Jan 06 '15 at 15:02

Quick example on http://embed.plnkr.co/qKLWrClyYvyvGyIPLnLQ/preview. Watch the page and build the array that is to be displayed

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

app.controller('Example', function($scope){
  $scope.lists = [
    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,15
  ];
  $scope.totalItems = $scope.lists.length;
  $scope.currentPage = 1;
  $scope.numPerPage = 8;
  $scope.theActualDisplayList = [];

  $scope.$watch('currentPage', function(page) {
    if($scope.currentPage) {
      var spliceFrom = ($scope.currentPage - 1) * $scope.numPerPage; 
      var offset = spliceFrom + $scope.numPerPage;
      $scope.theActualDisplayList = [];
      for (var i = spliceFrom; i < offset; i++) {
        if(i === $scope.lists.length) return false;
        $scope.theActualDisplayList.push($scope.lists[i]);
      }
    }
  });

});


<body ng-app="pagination" ng-controller="Example">
    <h1>Pagination.</h1>
    <ul><li ng-repeat="i in theActualDisplayList track by $index">{{i}}</li></ul>
    <pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage" class="pagination-sm"></pagination>
  </body>

score 0 · Answer 2 · answered May 23 '15 at 18:50

enter image description here Here http://plnkr.co/edit/CcN7UPKW0EWgYDhuzHpN?p=preview I made a plnkr after I face problem on dynamic pagination using angularjs, here I think u get all fix. For details u can read a post I've written on http://tutexp.com/angularjs-datagrid-paging-sorting-filtering-using-asp-net-and-mssql/ Hope you will be helped. Here pagination initialization if we have item list binned in $scope.Items

$scope.currentPage = 1; //current page
    $scope.entryLimit = 5; //max no of items to display in a page
    $scope.filteredItems = $scope.Items.length; //Initially for no filter
    $scope.totalItems = $scope.filteredItems;
    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function () {
        $timeout(function () {
            $scope.filteredItems = $scope.filtered.length;
        }, 9000);
    };
    $scope.sort_by = function (predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };

Iterating list items in table row as shown below

<tr ng-repeat="data in filtered = (Items  | filter:{'Name':SearchText}:false |
 filter:{'CountryId':  CountryId || undefined}:true |orderBy : predicate
:reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
       <td><b>{{data.Name }} </b></td>
                                            <td>
                                                <b>
                                                    {{data.CountryId == "1" ? 'Bangladesh' : ''}}
                                                    {{data.CountryId == "2" ? 'India' : ''}}
                                                    {{data.CountryId == "3" ? 'Pakistan' : ''}}
                                                    {{data.CountryId == "4" ? 'Vutan' : ''}}
                                                    {{data.CountryId == "5" ? 'Nepal' : ''}}
                                                </b>
                                            </td>
                                        </tr>

How to solve error in paging using AngularJS?

2 Answers2