Question

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

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

但是现在我想要一个更灵活的解决方案，我在顶部设置一个偏移量，左边放在'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语句中迭代行和单元格？因此，在矩阵上线性迭代而不是在两次迭代中？

我最初的想法是我需要编写自己的指令才能做到这一点，但我希望有更简单的方法...

提前致谢！

Answer 1

实际上，'position：absolute'与嵌套元素无关。 'position：absolute'是相对于具有'position：relative'或'position：absolute'风格的第一个祖先。

只要您没有定位行div，您就应该能够获得更灵活的解决方案。

Answer 2

问题在于百分比总是在父元素上计算，而不是在“相对”祖先上计算。位置，是的，尺寸，而不是。

所以你真的需要展开循环，而角度是无法做到的。您可以使用underscore.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位置。 absolute元素始终相对于最近的（包含）relative元素定位。

AngularJS在对象矩阵上线性迭代

2 个答案: