Question

我试图找出如何在ng-repeat的最后一次迭代中调用函数？我使用嵌套的ng-repeats以表格格式显示结果，并希望在加载所有表格单元格后调用函数。

我试图做这样的事情：

<tr ng-repeat="(rowIndex, rowResults) in chunkedResults">    
    <td ng-repeat="result in rowResults">
        <canvas id="item{{rowIndex}}{{$index}}"></canvas>
        <div>Canvas{{rowIndex}}{$index}}</div>
    </td>
    <div ng-if="$last" ng-init="loadCanvases()"></div>
</tr>

但是对于嵌套的ng-repeats，这似乎不起作用。当只有一个ng-repeat存在时：

<tr>    
    <td ng-repeat="result in rowResults">
        <canvas id="item{{$index}}"></canvas>
        <div>Canvas{$index}}</div>
        <div ng-if="$last" ng-init="loadCanvases()"></div>
    </td>
</tr>

然后在最后一次迭代中调用该函数。

任何想法为什么？

Answer 1

在ng-init中添加条件

<td ng-repeat="result in rowResults">
    <canvas id="item{{$index}}"></canvas>
    <div>Canvas{{$index}}</div>
    <div ng-if="$last" ng-init="$last?loadCanvases():null"></div>
</td>

Answer 2

您可以创建一个指令，并将其放置在＆＃34; last＆＃34; div：

<td ng-repeat="result in rowResults">
    <canvas id="item{{$index}}"></canvas>
    <div>Canvas{{$index}}</div>
    <div ng-if="$last" data-onlast></div>
</td>

然后在您的自定义＆＃34; onlast＆＃34;中执行您自己的逻辑指令。

（ng-init只能用于与ng-repeat相同的级别，尽管你可以使它工作）

Answer 3

你可能没有以正确的方式解决问题。

如果你想在DOM包含所有列表元素后执行代码（例如你想获得元素的像素高度），你可以在$ timeout之后执行它。这将确保完成先前的角度消化，并且所有内容都在DOM中。

$timeout(function() {
  // Here execute anything you want after the list is loaded
});

AngularJS：如何在ng-repeat的最后一次迭代中调用函数？

3 个答案: