Question

我正试图对ng-repeat进行分页。获得结果但是时间显示旧数据并突然隐藏并显示新的设置数据，如抽搐。我的angularjs版本是“1.5.8”。

$scope.gap = 5;

        $scope.filteredItems = [];
        $scope.groupedItems = [];
        $scope.itemsPerPage = 5;
        $scope.pagedItems = [];
        $scope.currentPage = 0;
        var resultData = [...];
        var searchMatch = function (haystack, needle) {
            if (!needle) {
                return true;
            }
            return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
        };

        // init the filtered items
        $scope.search = function () {
            $scope.filteredItems = $filter('filter')(resultData, function (item) {
                for(var attr in item) {
                    if (searchMatch(item[attr], $scope.query))
                        return true;
                }
                return false;
            });
            // take care of the sorting order

            $scope.currentPage = 0;
            // now group by pages
            $scope.groupToPages();
        };

        $scope.groupToPages = function () {
            $scope.pagedItems = [];

            for (var i = 0; i < $scope.filteredItems.length; i++) {
                if (i % $scope.itemsPerPage === 0) {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
                } else {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
                }
            }
            console.log($scope.pagedItems)
        };

        $scope.range = function (size,start, end) {
            var ret = [];        
            //console.log(size,start, end);

            if (size < end) {
                end = size;
                start = size-$scope.gap;
            }
            for (var i = start; i < end; i++) {
                ret.push(i);
            }        
            // console.log(ret);        
            return ret;
        };

        $scope.prevPage = function () {
            if ($scope.currentPage > 0) {
                $scope.currentPage--;
            }
        };

        $scope.nextPage = function () {
            if ($scope.currentPage < $scope.pagedItems.length - 1) {
                $scope.currentPage++;
            }               
        };

        $scope.setPage = function () {
            console.log($scope.pagedItems[$scope.currentPage]);
            $scope.currentPage = this.n;
        };

        $scope.search();

HTML

<tr ng-repeat="user in pagedItems[currentPage]" >
        <td>{{user.name}} {{$index}}</td>
      </tr>

如上面的代码，该表行更新为5行。但是当我点击下一个或显示10行的页码并隐藏5行时。我希望你能理解这些家伙！帮助我。

Answer 1

在我看来，你错了，使用自定义过滤器更简单，并像这样分解你的业务逻辑

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

然后在控制器中你可以做

$scope.showResults = function() {
                        $scope.list = $filter('startFrom')($scope.initialList, $scope.page * $scope.itemsPerPage);
                        $scope.list = $filter('limitTo')($scope.list, $scope.itemsPerPage);
                    }
                };

现在你只需更新$ scope.page并重用$ scope.showResults（）来更新视图

<tr ng-repeat="user in list" >
    <td>{{user.name}} {{$index}}</td>
  </tr>

Answer 2

我不认为你的问题是由ng-repeat引起的。我只需要你的代码，添加一些虚拟数据并进行测试，它完全正常。

您可以在此处查看https://codepen.io/Cushdrive/pen/zvPPXd

因为angular是双向绑定，所以我想知道是否可能在某处触发了一些分页信息。您是否可以仔细检查某些变量，例如currentPage itemPerPages或pagedItems，看看它是否在其他地方使用过？

ng-repeat在Angular js中没有正确更新

2 个答案: