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 コンテナーではないためです。

1 つの ng-repeat ステートメントで行とセルを反復処理する方法はありますか? したがって、2回の反復ではなく、マトリックスを線形に反復しますか?

私の最初の考えは、これを行うには独自のディレクティブを書く必要があるということでしたが、もっと簡単な方法があることを願っています...

前もって感謝します！

4

2 に答える 2

0

実際には、'position:absolute' はネストされている要素に対して相対的ではありません。「position:absolute」は、「position:relative」または「position:absolute」スタイルを持つ最初の祖先に相対的です。

行 div を配置しない限り、より柔軟なソリューションが機能するはずです。

于 2013-06-06T15:24:26.253 に答える
0

問題は、パーセンテージが「相対的な」祖先ではなく、常に親要素で計算されることにあります。位置、はい、サイズではありません。

したがって、実際にはループを展開する必要がありますが、角度はそれを行うことができません。underscore.jsまたはそれを使用できますlodash.js。それを含めて、スコープに公開します

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

ループする前に double 配列をフラット化します。

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

于 2013-06-06T15:24:46.503 に答える