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

I took a slightly different method using ngInit. I'm not sure if this is the appropriate solution since the ngInit documentation states

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

I'm not really sure if this falls under that case, but I wanted to move this functionality away from the controller to give the template designer easier freedom to group by rows with bootstrap. I still haven't tested this for binding, but seeing as i'm tracking by $index I don't think that should be a problem.

Would love to hear feedback.

I created a filter called "splitrow" that takes one argument (the count of how many items in each row)

.filter('splitrow', function(){
    return function (input, count){
        var out = [];
            if(typeof input === "object"){
                for (var i=0, j=input.length; i < j; i+=count) {
                    out.push(input.slice(i, i+count));
                }
            }
        return out;
    }
});

Within the view template I organized the bootstrap rows as follows:

    

        

            {{item.property}}
        
    

I edited @Shivam's Plunker to use this method. It requires no external libraries.

Plunker