CODEWITHSUNDEEP
angularjsangularjs-directivepaginationangular-ui-bootstrap
shank
shank

Reputation: 91

bind custom ng-repeat pagination with Controller

I am creating custom Pagination using ng-repeat but the problem is that i want to bind the pagination to the controller...so that when i click on pagination button it should show that content in the view..

app.controller("pagCtrl", function ($scope, $xml) {
        $scope.myobj = obj;
        $scope.viewby = 1;
        $scope.totalItems = $scope.myobj.ques.length;
        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5;
        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };
        $scope.pageChanged = function () {
        };
        $scope.setItemsPerPage = function (num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1;
        }

my view

<div ng-controller="pagctrl">
</div>

MY custom bootstrap code

<ul class="pagination ">
<li ng-repeat=" opt in myobj.ques"  >

<a href="">{{ $index+1 }}</a>
    </li>
</ul>

I want to bind it with controller so that when i press on 1 it should show content no 1 in div and when i press button 2 it should show content 2 in the view

Upvotes: 0

Views: 3482

Answers (2)

Sourabh Agrawal
Sourabh Agrawal

Reputation: 856

Filter for you application 

location_manager.filter('pagination', function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    };
});

Pagination Div

<--Pagination div --->

<div class="pagination-div" ng-show="datalists.length">
<ul>
 <li>
  <button type="button" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1">PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT </button>
 </li>
</ul>
</div>

Controller

angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{

// pagination
 $scope.curPage = 0;
 $scope.pageSize = 5;
 $scope.datalists = data ;// response from service

$scope.numberOfPages = function() 
 {
 return Math.ceil($scope.datalists.length / $scope.pageSize);
 };

});

Upvotes: 0

Alvaro Silvino
Alvaro Silvino

Reputation: 9743

You gonna need The total pages;

$scope.totalPages = $scope.totalItems/$scope.maxSize;

app.controller("pagCtrl", function ($scope, $xml) {
        $scope.myobj = obj;
        $scope.viewby = 1;
        $scope.totalItems = $scope.myobj.ques.length;

        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5;
        $scope.totalPages = $scope.totalItems/$scope.maxSize;
        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };
        $scope.pageChanged = function () {
        };
        $scope.setItemsPerPage = function (num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1;
        }

<ul class="pagination ">
  <li ng-repeat=" ng-repeat="n in [] | range:totalPages""  >

    <a href="">{{ $index+1 }}</a>
  </li>
</ul>

Upvotes: 1

Related Questions