AngularJS不刷新ng-repeat页面更改

Question

我正在使用AngularJS将数据绑定到我的Laravel应用程序。我还使用Bootstrap-UI进行分页，到目前为止，事情一开始就在一起工作。

当我切换到第2页时，ng-repeat将不会显示第2页的数据。我已经检查并且$ scope.results随第2页的数据而变化，但ng-repeat不会显示它。它是空白的。

我试过放置$ scope。$ watch，但我总是得到一个错误，告知$摘要已经在进行中。

这里是我的HTML代码：

<tr ng-repeat="result in filtered = results | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="results-table"> 
    <td class="text-center"> 
     [[ result.id ]] 
    </td> 
    <td> 
     [[ result.name ]] 
    </td> 
    <td> 
     [[ result.email ]] 
    </td> 
    <td> 
     [[ result.cpf ]] 
    </td> 
    <td class="text-center"> 
     <span class="label label-sm" ng-class="{true: 'label-success', false: 'label-danger'}[result.active == 'Ativo']"> 
      [[ result.active ]] 
     </span> 
    </td> 
    <td class="text-center"> 
     <a href="#"><i class="fa fa-pencil font-blue"></i></a> 
     <a href="#"><i class="fa fa-remove font-red-flamingo"></i></a> 
    </td> 
</tr> 

我的分页HTML（引导-UI）

<pagination class="pull-right" ng-change="getResults(currentPage)" ng-model="currentPage" num-pages="numPages" total-items="totalItems" items-per-page="entryLimit"></pagination> 

我的角度代码：

var app = angular.module('prime', ['ngSanitize','ngResource','angular-loading-bar','ngAnimate','ui.bootstrap'], 
function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
}); 


app.factory('JsonService', function ($resource,model) { 
    return $resource('/api/users/?page=:page',{page: "@page"}); 
}); 

app.filter('startFrom', function() { 
    return function (input, start) { 
     if (input) { 
      start = +start; 
      return input.slice(start); 
     } 
     return []; 
    }; 
}); 

app.controller('ResultsController', function($scope, $http, JsonService, filterFilter) { 

    $scope.results = []; 
    $scope.search = []; 
    $scope.currentPage = 1; 
    $scope.entryLimit = 10; // itens por pagina 

    $scope.init = function() { 
     JsonService.get({}, function (response) { 
      $scope.results = response.data; 
      $scope.totalItems = response.total; 
      $scope.noOfPages = Math.ceil($scope.totalItems/$scope.entryLimit);   
     }, function (error) { 
      $scope.results = []; 
     }); 
    }; 

    $scope.resetFilters = function() { 
     $scope.search = []; 
    }; 

    // runs $watch on the search field 
    $scope.$watch('search', function (newVal, oldVal) { 
     $scope.filtered = filterFilter($scope.results, newVal); 
     $scope.totalItems = $scope.filtered.length; 
     $scope.noOfPages = Math.ceil($scope.totalItems/$scope.entryLimit); 
     $scope.currentPage = 1; 
    }, true); 

    $scope.$watch('currentPage', function(newPage) { 
     $scope.init($scope.numberPage); 
    }); 

}); 

Answer 1

就是你们的榜样准确吗？有一些混乱的部分它可能关系到你的问题：

1. 你$scope.init()方法从不传递一个page参数的.get()方法。因此，您的服务可能每次都返回相同的页面。

2. 您的$watch('currentPage', ...)致电手表currentPage，但将$scope.numberPage传递给$scope.init()方法。即使＃1中的问题不存在，我认为你的意思是在这里使用currentPage而不是numberPage。

3. 你执行客户端分页，以及服务器端分页：

   <tr ng-repeat="result in filtered = results | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="results-table"> 
   

   具体来说，这一部分：

   startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit 
   

   你entryLimit设置为10，对不对？假设您请求第2页，服务器返回10个项目（假设问题＃1和＃2不存在）。您的过滤器将评估为这样的：

   startFrom:(2-1)*10 | limitTo:10 
   

   其中就出来：

   startFrom:10 | limitTo:10 
   

   但你只有10个项目，因为服务器已经做了分页！通过进行客户端分页，您最终会得到一个空的列表。因此，要么摆脱客户端分页（startFrom和limitTo），要么摆脱服务器端分页（在开始时加载一切）。

这就是我能从你的代码中看到的。如果您可以在Plunker上发布完整示例或其他内容，我们可能会提供更多帮助。