nest ng-repeat generates much more items than expected

Question

Main idea:

I want to combine bootstrap grid system with angular ng-repeat

Method:

I used filter to reformat the json data (an array with a lot of objects), like the codepen project:

http://codepen.io/maggiben/pen/sfCnq ``` filter('listToMatrix', function() { return function listToMatrix(list, elementsPerSubArray) {

    var matrix = [], i, k;
    console.log("hellowrld")
    for (i = 0, k = -1; i < list.length; i++) {
        if (i % elementsPerSubArray === 0) {
            k++;
            matrix[k] = [];
        }

        matrix[k].push(list[i]);
    }

    return matrix;
};

});

And here is my jade page code:

My controller code: To get the news.

The problem is I got much more items on the page:

Answer 1

This error means angular doesn't manage to finish a digest cycle. The reason for it comes from your filter: every time angular applies the filter to your list, a new matrix is created, so angular will keep invoking the filter until what it returns is the same as the previous iteration (which never happens).

To fix it, you could either track the items of your matrix using ng-repeat ... track by items.someProperty, so after two consecutives calls to your filter, angular will detect that this someProperty has not changed and will finish the cycle.

Another way to fix it would be to cache the result of your filter for a given list, so the next time angular invoyes your filter with the same list, you would return a pointer to the same matrix.

For more lecture you can refer to this question (same problem): Angular filter works but causes "10 $digest iterations reached"