Javascript 如何从阵列数据模型在基于列的布局中放置交替元素？

$scope

中有一个动态数组，HTML模板中有三列。数组中的元素需要以HTML格式呈现，如下所示：

请注意，这三列只显示一次。根据与表达式匹配的索引，每个元素将被放置在特定列中

当然，我可以使用三个

ng repeat

声明来实现它，但是出于性能考虑，我希望只使用一个

ng repeat

就可以实现它

---

任何想法都值得赞赏。

使用嵌套的

ng repeat

s来调节列中的每个项目；假设采用这种模式：

列：[1,2,3]，
项目：['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i']

您的视图将如下所示：

列{（outerIndex=$index）&&c | | c}

注意我们是如何将一个新变量（

outerIndex

）注入到外循环作用域中的，该变量将与交替条件变量的内循环的

$index

一起使用

单击下面的大演示按钮查看它的实际操作（我们在这里依赖于引导css，只是为了演示布局中的列）

---

TL；DR，Gimmi tha演示

---

我刚刚偶然发现了完全相同的问题。可能是嵌套的

ng repeat

s与内部

$index

引用？是的，这就是诀窍。看我的答案。这有点快，有点脏，我很快就会回来重构，并从中提取一个通用的a指令。不过，这应该可以让您开始了。感谢您的回答和编辑：）。您的答案是可行的，但实际上它仍然会将

项

数组完全循环3次，因此仍然存在潜在的性能问题。我用3数组解决了这个问题，这也很棘手。我稍后会将其作为答案发布。我会继续寻找更好的方法。性能瓶颈在于改变DOM，而不是循环数据。我们使用条件（

ng if

）来解决这个问题，所以这里没有惩罚。然而，首先正确地建模数据总是更好的，所以也许你可以从三个数组移动到一个矩阵（！），它最好地描述了表格数据。它有意义并且是可以接受的…我接受它作为一个解决方案。但我仍然想知道是否有更好的方法避免它循环三次。是的，使用三个数组实际上是硬代码。矩阵更具可扩展性和灵活性。再次感谢。