顯示所有記錄和顯示更少記錄的角度分頁

Question

我正在使用AngularJS以表格格式顯示JSON數據。我已經完成了取數據。我還實施了數據移動的分頁。

在這裏，我有三個鏈接的要調整，如 「顯示所有記錄」，數據 「顯示10條記錄」 和「重置爲10條

的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>