Angular Pagination with Show All Records and Show Less Records

Question

I am using AngularJS to show JSON data in table format. I have done with the fetching data. i have also implemented the pagination for the data movement.

Here I have three Link's to Adjust the Data like "Show All Records", "Show 10 More Records" and "Reset to 10 Records.

JavaScript:

var app = angular.module("MyApp",['ui.bootstrap']);
app.controller("MyController",function($scope,$http){
    $http({method:"GET",url:'db.json'}).success(function(data,status,headers,config){
        $scope.DBTotalData = data.length;
        $scope.TotalPages='';
        $scope.filteredapp = [],$scope.currentPage = 1,$scope.numPerPage = 5,$scope.maxSize = 1;
          $scope.numPages = function () {
            return Math.ceil(data.length / $scope.numPerPage);
          };
          $scope.$watch('currentPage + numPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage)
            , end = begin + $scope.numPerPage;
            $scope.TotalPages=Math.ceil(parseInt(data.length,0)/parseInt($scope.numPerPage,0));
            $scope.filteredapp = data.slice(begin, end);
            $scope.DBData=$scope.filteredapp;
          });
    }).error(function(data,status,headers,config){
        console.debug("error");
    });
});

HTML:

<div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
<div class="rgDataShowCtrl">
    <a href="javascript:;">Show 10 More Records</a> 
    <a href="javascript:;">Reset to 10 Records</a> 
    <a href="javascript:;">Show All Results</a> <div class="clear"></div></div>
<div class="clear"></div>


<tr ng-repeat="dData in DBData">
    <td>{{dData.IaAcqNumber}}</td>
    <td>{{dData.IaAssetNumber}}</td>
    <td>{{dData.IaRepAssetNumber}}</td>
    <td>{{dData.IaYearApp}}</td>
    <td>{{dData.IaMake1}}</td>
    <td>{{dData.IaModelRP}}</td>
    <td>{{dData.IaOrganization}}</td>
    <td>{{dData.IaDepartment}}</td>
    <td>{{dData.IaTemplate}}</td>
</tr>

Answer 1

Javascript:

var app = angular.module("MyApp",['ui.bootstrap']);
app.controller("MyController",function($scope,$http){
    $http({method:"GET",url:'db.json'}).success(function(data,status,headers,config){
        $scope.DBTotalData = data.length;
        $scope.TotalPages='';
        $scope.filteredapp = [],$scope.currentPage = 1,$scope.numPerPage = 10,$scope.maxSize = 1;
            $scope.ShowAll=function(value){
                if(value==0){
                    $scope.numPerPage = $scope.numPerPage+10;
                    $(".showreset").show();
                }else if(value==1){
                    $scope.numPerPage = 10;
                    $(".showreset").hide();
                }else if(value==2){
                    $scope.numPerPage = data.length;
                    $(".showreset").show();
                }
            };      
          $scope.numPages = function () {
            return Math.ceil(data.length / $scope.numPerPage);
          };
          $scope.$watch('currentPage + numPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage)
            , end = begin + $scope.numPerPage;
            $scope.TotalPages=Math.ceil(parseInt(data.length,0)/parseInt($scope.numPerPage,0));
            $scope.filteredapp = data.slice(begin, end);
            $scope.DBData=$scope.filteredapp;
          });
    }).error(function(data,status,headers,config){
        console.debug("error");
    });
});

HTML:

<div data-pagination="" data-num-pages="numPages()" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
<div class="rgDataShowCtrl"> 
    <a href="javascript:;" ng-click="ShowAll(0)" class="showmore">Show More per Page</a> 
    <a href="javascript:;" ng-click="ShowAll(1)" class="showreset">Reset to 10 per Page</a> 
    <a href="javascript:;" ng-click="ShowAll(2)" class="showall">Show All Results</a>
  <div class="clear"></div>
</div>
<div class="clear"></div>
<tr ng-repeat="dData in DBData">
  <td>{{dData.IaAcqNumber}}</td>
  <td>{{dData.IaAssetNumber}}</td>
  <td>{{dData.IaRepAssetNumber}}</td>
  <td>{{dData.IaYearApp}}</td>
  <td>{{dData.IaMake1}}</td>
  <td>{{dData.IaModelRP}}</td>
  <td>{{dData.IaOrganization}}</td>
  <td>{{dData.IaDepartment}}</td>
  <td>{{dData.IaTemplate}}</td>
</tr>