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.
我试图解决的问题是这个,我对如何解决这个问题感到有些困惑。我正在使用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-even or ng-odd and using css to create a new line).
> 2列要求是我理解如何进行一个或两个列网格布局(一列是无序和无样式列表,两列使用ng-even或ng-odd并使用css创建新行)。
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?
所以问题基本上是这样的:对于大小为N且列号为M(M
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.
如果可能的话,我宁愿不只是插入一个
每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 M elements.
同样使用表格让我处于和以前一样的情况,我仍然需要对每个M元素进行不同的操作。
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.
值得注意的是,我也在使用twitter-bootstrap,所以我也欢迎使用css解决方案。
Thanks in advance and please tell me if I'm missing something obvious.
在此先感谢,如果我遗漏了一些明显的东西,请告诉我。
2 个解决方案
#1
7
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数据的插件(数组! - 如果您愿意,也可以将其设为对象)
#2
0
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-6 even inside a row.
我也有同样的问题,不幸的是,一个表不会为我的用例做诀窍。即使使用2D数组,ng-repeat也会忽略col-md-6,即使在一行内也是如此。
#1
7
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数据的插件(数组! - 如果您愿意,也可以将其设为对象)
#2
0
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-6 even inside a row.
我也有同样的问题,不幸的是,一个表不会为我的用例做诀窍。即使使用2D数组,ng-repeat也会忽略col-md-6,即使在一行内也是如此。