1

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

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

但是现在我想要一个更灵活的解决方案，在该解决方案中，我在顶部设置了一个偏移量，在“位置：绝对”元素的左侧，这将无法以这种方式遍历行然后遍历单元格。

<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 语句中迭代行和单元格？因此在矩阵上线性迭代而不是两次迭代？

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

提前致谢！

4

2 回答 2

0

Actually, 'position:absolute' is not relative to the element in which it is nested. 'position:absolute' is relative to the first ancestor which has a 'position:relative' or 'position:absolute' style.

Your should be able to get your more flexible solution should work, so long as you're not positioning the row divs.

于 2013-06-06T15:24:26.253 回答
0

The problem resides in that the percentages are always calculated on the parent element, not on the "relative" ancestor. The position, yes, the sizes, not.

So you really need to unroll the loop, and angular is not able to do it. You can use underscore.js or lodash.js for it. Include it, publish to the scope

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

and flatten your double array before looping:

<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>

You should also be sure that you apply CSS positions correctly. An absolute element is always positioned relatively to the nearest (containing) relative element.

于 2013-06-06T15:24:46.503 回答