twitter-bootstrap 使用 ng-repeat 创建“网格”布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15969661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a "grid" layout using ng-repeat
提问by ryaanwells
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-repeatfor each of the points I've stated here and I intend to use this in the final solution if possible.
我试图解决的情况是这样的，我对如何解决这个问题感到有些困惑。我正在使用ng-repeat我在这里陈述的每一点，如果可能的话，我打算在最终解决方案中使用它。
- 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.
- 我有一个对象数组，格式完全相同。（安全地假设这是真的）
- 每个对象都有一个属性列表。
- 我希望将这些排列在具有 > 2 列的网格中，并且会有任意多的行。
- 每个网格位置将显示该位置对象的属性。
- 列数不需要动态更改。
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-evenor ng-oddand using css to create a new line).
> 2 列的要求是我了解如何进行一列或两列网格布局（一列是无序和无样式的列表，两列使用ng-evenorng-odd和使用 css 创建新行）。
So the question is basically this: for an array of size Nand a column number of size M(M<N), can I create a grid of the Nelements with Melements per row while still using ng-repeat?
所以问题基本上是这样的：对于一个大小为的数组N和一个大小为M( M<N)的列号，我可以在仍然使用的同时创建一个每行N元素的M元素网格ng-repeat吗？
If possible, I'd rather not just insert a <br>every Melements - since I'm using ng-repeateach 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.
如果可能的话，我宁愿不只是插入<br>每一个M元素-因为我使用的ng-repeat每一个元素，预计将有对象的属性，正如我在定义它ng-repeat，我知道的角度将处理不正确的输入，但利用这似乎不是正确的做法。
Also using a table leaves me in the same situation as before, I still need to do a different operation every Melements.
同样使用表格使我处于与以前相同的情况，我仍然需要对每个M元素进行不同的操作。
Is there a clean way to do this in angular?
有没有一种干净的方法可以在角度上做到这一点？
It is worth noting that I'm also using twitter-bootstrapso I'll welcome css solutions too.
值得注意的是，我也在使用，twitter-bootstrap所以我也欢迎 css 解决方案。
Thanks in advance and please tell me if I'm missing something obvious.
提前致谢，如果我遗漏了一些明显的东西，请告诉我。
回答by ganaraj
I dont really know if this is what you are looking for ( if not please provide an example - json data array is also fine ! )
我真的不知道这是否是您要找的（如果不是，请提供一个示例 - json 数据数组也可以！）
Here is a plunk that displays a MxN data ( array! - you can make it object as well if you wish)
这是一个显示 MxN 数据的 plunk（数组！ - 如果您愿意，您也可以将其设为对象）
回答by Dylan Pierce
I'm having the same issue as well, unfortunately a table won't do the trick for my use case. It seems even with a 2D array ng-repeat tends to ignore col-md-6even inside a row.
我也有同样的问题，不幸的是，表格对我的用例不起作用。似乎即使使用 2D 数组 ng-repeat 也倾向于忽略col-md-6甚至在row.
