1

我正在尝试为角度创建一个简单的分页过滤器，以便像这样使用：

<ul>
    <li ng-repeat="page in items | paginate: 10">
        <ul>
           <li ng-repeat="item in page">{{ item }}</li>
        </ul>
    </li>
</ul>

我写了简单的函数：

angular.module('app.filters', [])
    .filter('paginate', function() {
        return function(input, perPage) {
            var pages = [],
                perPage = perPage || 10;

            for (i=0; i < input.length; i += perPage)
                pages.push(input.slice(i, i + perPage));

            return pages;
        };
    });

它导致 angular 崩溃并带有非常神秘的（至少对我而言）错误消息。我发现问题出在过滤结果中的嵌套列表中。要重现该问题，这样做就足够了：

angular.module('app.filters', [])
    .filter('paginate', function() {
        return function(input, perPage) {
            return [[1,2,3],[4,5,6]];
        };
    });

你能告诉我：

  • 为什么嵌套列表是角度过滤器的问题？
  • 我在哪里可以在文档中阅读它？
  • 我如何最终以正确的方式编写过滤器？

您可以在此 plunker 中查看所有代码：http ://plnkr.co/edit/gUIJcJg0p5LqKGH10B8t?p=preview 运行代码后，打开控制台，您将看到错误消息。

谢谢

4

2 回答 2

1

我已将此报告给 Angular 团队，他们说这是预期的行为：

这是预期的行为。该模型无法稳定，因为您每次都在更改分页数组的标识。

最好不要为此使用过滤器，而是在控制器中为 $scope.$watch 提供更多功能。

所以这样的事情不能通过过滤器完成，你必须在控制器中执行分页，而不是使用过滤器。

于 2013-10-02T20:44:39.950 回答
-1

我无法帮助您解决第一个问题，但我可以为您的问题提供解决方案。

我有一个类似的问题，我想打开和关闭每两个元素，我用这样的东西修复它：

myApp.filter('paginate', ['$cacheFactory', function($cacheFactory) {
    var arrayCache = $cacheFactory('paginate');
    return function(array, size) {
        if (!array) {
            return false;
        }
        var newArray = [];
        for (var i = 0; i < array.length; i++) {
            newArray.push(array.slice(i, i + size));
        }
        var arrayString = JSON.stringify(array),
            cachedParts = arrayCache.get(arrayString + size);
        if (JSON.stringify(cachedParts) === JSON.stringify(newArray)) {
            return cachedParts;
        }
        arrayCache.put(arrayString + size, newArray);
        return newArray;
    };
}]);

您使用此过滤器的方式正是您在模板中使用它的方式，在每个页面上传递您想要的元素数量。

关于第二个问题：我拥有的关于 Angular 的最佳资源是egghead.io和A Better Way to Learn AngularJS上的所有视频。

我还被告知，Mastering Web Application Development with AngularJS这本书也是一个很好的资源。

于 2013-09-27T23:25:51.107 回答