I'm currently working on developing a straightforward pagination filter for Angular, which can be implemented as shown below:
<ul>
<li ng-repeat="page in items | paginate: 10">
<ul>
<li ng-repeat="item in page">{{ item }}</li>
</ul>
</li>
</ul>
I have created a simple function:
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;
};
});
However, this has led to Angular crashing with somewhat confusing error messages. After some investigation, I discovered that the issue lies with nested lists in the filter results. This problem can be reproduced by following these steps:
angular.module('app.filters', [])
.filter('paginate', function() {
return function(input, perPage) {
return [[1,2,3],[4,5,6]];
};
});
I would like to know:
- Why are nested lists problematic for Angular filters?
- Where can I find information about this in the documentation?
- How can I write a filter correctly to avoid this issue?
You can view all the code in this plunker: http://plnkr.co/edit/gUIJcJg0p5LqKGH10B8t?p=preview. After running the code, check the console for error messages.
Thank you