angular.js ng-repeat for creating grid

Question

I\'m trying to create a grid using bootstrap 3 and angularjs.

The grid I\'m trying to create is this, repeated using ng-repeat.

Answer 1

My solution is very similar to @CodeExpress one. I made a batch filter that groups items of an array (the name is borrowed it from Twig's counterpart filter). I don't handle associative arrays for simplicity's sake.

angular.module('myapp.filters', [])
    .filter('batch', function() {
        var cacheInputs = [];
        var cacheResults = [];

        return function(input, size) {
            var index = cacheInputs.indexOf(input);

            if (index !== -1) {
                return cacheResults[index];
            }

            var result = [];

            for (i = 0; i < input.length; i += size) {
                result.push(input.slice(i, i + size));
            }

            cacheInputs.push(input);
            cacheResults.push(result);

            return result;
        }
    })
;

It can be used this way:

    

        

            

                ...
            
        
    

The filter results are cached to avoid the 10 $digest() iterations reached. Aborting! error.