Angular，限制子重复

Question

我试图通过其父重复的索引来限制子重复。因此，无论对其进行级别索引，都将限于该级别（+ 1，因此我们不从 0 开始）。这是我的想法 -

        <div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
            <div class="trialGrid">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
                        <td ng-repeat="item in row">{{item}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
</div>

所以 table 中的 tr 将被限制为 face 的初始重复，buy faces $index + 1。这是行不通的。任何见解将不胜感激。谢谢！

Answer 1

您可以使用ng-init保存对上层$index

的引用

    <div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
        <div class="trialGrid" ng-init="$faceIndex = $index">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
                    <td ng-repeat="item in row">{{item}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

Answer 2

而不是 face.$index 使用 $parent.$index 因为你想引用父 ng-repeat $index. 因为 ng-repeat 从其当前运行范围创建了一个隔离范围。

代码

<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
    <div class="trialGrid">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
                    <td ng-repeat="item in row">{{item}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

希望对您有所帮助。

Angular，限制子重复

Angular, limit sub repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat