使用ng-repeat创建“网格”布局

时间:2013-04-12 11:01:50

标签: twitter-bootstrap angularjs

我正在努力解决的问题是,我对如何解决这个问题感到有些困惑。我正在使用ng-repeat表示我在此处说过的每一点,如果可能的话,我打算在最终解决方案中使用它。

  • 我有一个对象数组,所有格式完全相同。 (安全地假设这是真的)
  • 每个对象都有一个属性列表。
  • 我希望在包含> 2列的网格中安排这些内容,并且会有任意数量的行。
  • 每个网格位置将显示该位置中对象的属性。
  • 列数不需要动态更改。

> 2列要求是我了解如何执行一个或两个列网格布局(一列是无序和无样式列表,两列使用ng-evenng-odd并使用css创建一个新行。)

所以问题基本上是这样的:对于大小为N且列号为MM<N)的数组,我可以创建{的网格吗? {1}}元素每行N元素,但仍在使用M

如果可能的话,我宁愿不只是插入一个ng-repeat每个<br>元素 - 因为我正在使用M每个元素都应该具有该对象的属性。在ng-repeat中定义它,我知道angular会处理不正确的输入但是利用它似乎不是正确的做法。

同样使用表格使我处于与以前相同的情况,我仍然需要对每个ng-repeat元素执行不同的操作。

有没有一种干净的方式来做角度?

值得注意的是,我也在使用M,所以我也欢迎使用css解决方案。

先谢谢,如果我遗漏了一些明显的东西,请告诉我。

2 个答案:

答案 0 :(得分:7)

我真的不知道这是不是你想要的(如果不是请提供一个例子 - json数据阵列也没关系!)

这是一个显示MxN数据的插件(数组! - 如果您愿意,也可以将其设为对象)

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

答案 1 :(得分:0)

我也遇到了同样的问题,不幸的是,一张桌子不能用于我的用例。即使使用2D数组,ng-repeat似乎也会在col-md-6内忽略row