Creating a "grid" layout using ng-repeat

Question

The situation I'm trying to solve is this and I'm a bit puzzled as to how this can be tackled. I'm using ng-repeat for each of the points I've stated here and I intend to use this in the final solution if possible.

• I have an array of objects, all the exact same format. (Safely assume this is true)
• Each object has a list of attributes.
• I wish to arrange these in a grid with >2 columns and there will be an arbitrarily large number of rows.
• Each grid location will display the attributes of the object in that location.
• The number of columns does not need to be dynamically changeable.

The >2 columns requirement is that I understand how to do a one or two column grid layout (one column is an unordered and unstyled list and two columns using the ng-even or ng-odd and using css to create a new line).

So the question is basically this: for an array of size N and a column number of size M (M<N), can I create a grid of the N elements with M elements per row while still using ng-repeat?

If possible, I'd rather not just insert a <br> every M elements - since I'm using ng-repeat each element is expected to have the attributes of the object as I define it in the ng-repeat, and I know that angular will deal with incorrect input but to exploit that doesn't seem like proper practice.

Also using a table leaves me in the same situation as before, I still need to do a different operation every M elements.

Is there a clean way to do this in angular?

It is worth noting that I'm also using twitter-bootstrap so I'll welcome css solutions too.

Thanks in advance and please tell me if I'm missing something obvious.

Answer 1

I dont really know if this is what you are looking for ( if not please provide an example - json data array is also fine ! )

Here is a plunk that displays a MxN data ( array! - you can make it object as well if you wish)

http://plnkr.co/edit/TgKA0cQ80Vo3vWztxFw4?p=preview