Question

我正在尝试为角度创建一个简单的分页过滤器，如下所示：

<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.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 运行代码后，打开控制台，您将看到错误消息。

谢谢

Answer 1

我reported这个角色团队，他们说这是预期的行为：

这是预期的行为。模型不能稳定，因为你是   每次都改变分页数组的身份。

最好不要为此使用过滤器，而是使用过滤器   功能到$ scope。$ watch在你的控制器中。

因此无法通过过滤器完成此类操作，您必须在控制器中执行分页，而不是使用过滤器。

Answer 2

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

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

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上的所有视频。

我还被告知，使用AngularJS掌握Web应用程序开发这本书也是一个很好的资源。

angular.js过滤器中的嵌套列表

2 个答案: