Loops AngularJ在对象矩阵上线性迭代

我知道ng repeat选项，我的第一个解决方案是为矩阵的行和列创建一个包含行和单元格的表，如下所示：

<table>
    <tr ng-repeat="row in matrix">
        <td class="tile" ng-repeat="tile in row">
            {{do tile.things}}
        </td>
    </tr>
</table>

{{dotile.things}}

但是现在我想要一个更灵活的解决方案，在顶部设置一个偏移量，在“position:absolute”元素的左边，这样就不能通过行和单元格进行迭代了

<div class="relative">
    <div ng-repeat="row in matrix">
        <span ng-repeat="cell in row">
            <span style="top: {{cell.topOffset}}%; left: {{cell.leftOffset}}%;">
                {{other cell.things}}
            </span>
        </span>
    </div>
</div>

{{其他细胞。东西}

原因是“position:absolute”是相对于嵌套它的元素的，而不是相对定位的div容器

有没有一种方法可以在一个ng repeat语句中迭代行和单元格？因此在矩阵上线性迭代而不是两次迭代

我最初的想法是，我需要写我自己的指令来做这件事，但我希望有一个更简单的方法

---

提前谢谢

实际上，“position:absolute”与嵌套它的元素无关“位置：绝对”相对于具有“位置：相对”或“位置：绝对”样式的第一个祖先

---

只要不定位行div，您应该能够获得更灵活的解决方案。问题在于百分比总是在父元素上计算，而不是在“相对”祖先上计算。位置，是的，尺寸，不是

所以你真的需要展开这个循环，angular无法做到。您可以使用

underline.js

或

lodash.js

。包括它，发布到范围

angular.module('yourApp').run(function ($rootScope) {
  $rootScope._ = _;
})

并在循环前展平双阵列：

<div class="relative">
    <div ng-repeat="cell in _.flatten(matrix, 1)">
        <span style="top: {{cell.topOffset}}%; left: {{cell.leftOffset}}%;">
            {{other cell.things}}
        </span>
    </div>
</div>

{{其他细胞。东西}

---

您还应该确保正确应用CSS位置。

绝对

元素总是相对最近（包含）的

相对

元素定位。

我会检查这个，仍然想知道这是否/为什么不起作用。。。再说一遍，我仍然对在矩阵上线性迭代的方法感兴趣；）是的，你的问题很有趣。我认为你不能在一个元素上组合多个ng重复。我想你必须写一个函数来扁平嵌套数组，然后迭代，在OP的问题中，绝对定位不是问题，更多的是位置的百分比计算。这取决于集装箱，而不是定位锚。这是一个很好的观察结果。我只是注意到他在这个问题上的断言是不正确的。如果他将垂直定位更改为像素值而不是百分比，他应该能够使其工作。谢谢，但这与使用angular（或只是javascript）函数展开循环相同，对吗？是的，'underline.js'或'lodash.js'包含这些函数，但这解决了问题。如果这是唯一的解决方案，那么这就是anwser，但我将把这个问题留一点时间，看看其他人是否对角度有更好的理解