Question

你有从I档加载的Angular JS元素分页的任何例子吗？

现在，而不是这个：

$scope.items = [
        {"id":"1","name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
        {"id":"2","name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
        {"id":"3","name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}, 
        {"id":"4","name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"}, 
        {"id":"5","name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"}, 
        {"id":"6","name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"}, 
        {"id":"7","name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"}, 
        {"id":"8","name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5 ":"field5 8"}, 
        {"id":"9","name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5 ":"field5 9"}, 
        {"id":"10","name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5 ":"field5 10"}, 
        {"id":"11","name":"name 11","description":"description 1","field3":"field3 11","field4":"field4 11","field5 ":"field5 11"}, 
        {"id":"12","name":"name 12","description":"description 1","field3":"field3 12","field4":"field4 12","field5 ":"field5 12"}, 
        {"id":"13","name":"name 13","description":"description 1","field3":"field3 13","field4":"field4 13","field5 ":"field5 13"}, 
        {"id":"14","name":"name 14","description":"description 1","field3":"field3 14","field4":"field4 14","field5 ":"field5 14"}, 
        {"id":"15","name":"name 15","description":"description 1","field3":"field3 15","field4":"field4 15","field5 ":"field5 15"}, 
        {"id":"16","name":"name 16","description":"description 1","field3":"field3 16","field4":"field4 16","field5 ":"field5 16"}, 
        {"id":"17","name":"name 17","description":"description 1","field3":"field3 17","field4":"field4 17","field5 ":"field5 17"}, 
        {"id":"18","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 
        {"id":"19","name":"name 19","description":"description 1","field3":"field3 19","field4":"field4 19","field5 ":"field5 19"}, 
        {"id":"20","name":"name 20","description":"description 1","field3":"field3 20","field4":"field4 20","field5 ":"field5 20"}
    ];

我必须使用由：

生成的东西

  $http.get('/json/mocks/apps/applications.json')
    .then(function (result) {
        $scope.items = result.data.applications;
    });

如何创建等待从$ http.get？

加载的数据的分页

Answer 1

推迟所有处理，直到获得数据。而不是：

$scope.items = [...];
paginate();

执行：

$http.get(...).success(function (data) {
    $scope.items = [...];
    paginate();
})

如果是您的示例，则process为$scope.search。 Here是您的示例的更新版本，它使用$timeout来模拟异步操作。

Answer 2

您可以使用limitTo过滤器和自定义偏移过滤器进行分页：

myApp.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start, 10);
    return input.slice(start);
  };
});

您的数据将在ng-repeat

自动加载后处理

示例here（抱歉它没有样式=））

Answer 3

Html代码

  <div ng-app="myApp" ng-controller="mainController">

    <div ng-init="showData()">
    <div  ng-repeat="x in List.data | limitTo: paginationLimit()"  >
       <h6>{{x.product_title}}</h6>
   </div>
  </div>
  </div>

  <button class="show-more-btn btn btn-info" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()" style="padding: 8px 50px; margin-bottom: 5%; margin-left: 40%; background-color:#78c826;">Mehr Laden</button>
  <div id="nomore" ></div>

Javascript代码

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope, $http) {

$scope.showData = function( ){
$('#pre-loader').show();

$http({
method : "GET",
url : URL
}).then(function mySuccess(response) {

  $scope.List = response.data;
     $('#pre-loader').hide();
       $scope.pan = $scope.List.data.length;
        var pagesShown = 1;
        var pageSize = 5;
        $scope.countd = $scope.pan/5;
        $scope.paginationLimit = function(data) {
            return pageSize * pagesShown;
        };
        $scope.hasMoreItemsToShow = function() {
                  $('#pres-loader').hide();
            return pagesShown < ($scope.List.length / pageSize);
        };
        $scope.showMoreItems = function() {
            $('#pres-loader').show();
            pagesShown = pagesShown + 1; 
            $scope.re = $scope.pan / pagesShown;
            if($scope.re <= $scope.countd ){
                $("#nomore").html('<p>No Data..</p>');
                 $(".show-more-btn").hide();    
            }
        };  
     setTimeout(function(){ $('.show-more-btn').removeClass('ng-hide'); 
       }, 3000);
    }, function myError(response) {
  $scope.List = response.statusText;
});

}
});

数据加载后的Angular JS分页

3 个答案: