모든 레코드를 표시하고 적은 레코드를 표시하는 각도 페이지 매기기

Question

AngularJS를 사용하여 JSON 데이터를 표 형식으로 표시하고 있습니다. 나는 가져 오는 데이터로 해왔다. 나는 또한 데이터 이동을위한 페이지 매김을 구현했다. 여기

나는 세 개의 링크의 "모두 표시 레코드"와 같은 데이터 조정하는 방법은 "10 더 레코드"및 "10 개 기록으로 재설정해야

자바 스크립트 :.

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

자바 스크립트 :

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>