AngularJS 在页面更改时不刷新 ng-repeat

Question

我正在使用 AngularJS 将数据绑定到我的 Laravel 应用程序。我也在使用 Bootstrap-UI 进行分页，到目前为止，一切都在协同工作。

当我切换到第 2 页时，ng-repeat 不会显示第 2 页中的数据。我已经检查过 $scope.results 正在随着第 2 页中的数据而变化，但 ng-repeat 不会显示它.一片空白。

我尝试放置 $scope.$watch，但总是收到错误消息，提示 $digest 已在进行中。

这是我的 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 (bootstrap-ui)

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

还有我的 Angular 代码：

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 或其他内容上发布完整示例，我们可能会提供更多帮助。