Question

我有以下（简化）示例，其中我不明白为什么我的函数被更频繁地调用然后我的ng-repeat呈现内容。（代码显示问题比我能解释的更好）。

（我确实读过关于ng-repeat-start / ng-repeat-end但我看不出这对我有什么帮助。）

提前感谢任何帮助输入！

<table>
<tr>
    <th><strong>Date</strong></th>
    <td ng-repeat="day in days"> 
    <!-- Where days is an array containing 6 dates -->
      {{day | date : 'EEE d'}}
    </td>
</tr>

<tr>
    <th><strong>Participants</strong></th>
    <td ng-repeat="day in days">
        <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
        <!-- This gets rendered 6 times but the function userParticipates() gets called 36 times (6*6?) - Why is that the case?-->
    </td>
</tr>

更新

感谢您的回答，Woot4Moo！对不起，我仍然很困惑：

你说我的代码生成了这个：

<span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
<span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
<span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
<span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
<span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
<span ng-if="!userParticipates(1)"><a href="">User does not participate</span>

但那不是我所看到的。我每行只有一次“用户不参加”（6次）。它只是ng-if中的函数被调用了36次。我不明白为什么，因为我的ng-repeat似乎没有彼此嵌套......？

Answer 1

由于ng-if条件启动了$ watch，你不知道它会被调用多少次，但你可以放心它会被调用很多次，并且每个方法都会在摘要中被多次调用周期。页面路径更改时或者页面上的任何事件（AJAX完成，按钮点击等）都会触发摘要周期。典型的摘要周期将至少两次通过每个手表（一次用于初始更改，一次用于初始更改）确认没有进一步变化的时间）。注册$ watch也会导致额外的呼叫。

在申请过程中，对这些表达式进行100次或1000次评估并非典型。

如果你的函数除了像a == b这样的简单条件检查之外还做了什么，那么你应该计算结果并缓存它。例如，在你的控制器中你可以在userId上有一个$ watch，然后当userId改变时，你设置currentUserParticipating = userParticipates(userId)然后你将在ng-if中使用currentUserParticipating。

Answer 2

这样做是因为每天（在你的例子中有6个）它会生成这个html：

    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
    <span ng-if="!userParticipates(1)"><a href="">User does not participate</span>

你实际上想要这个：

<div ng-repeat="day in days">
       <td>
            <span ng-if="!userParticipates(1)"><a href="">User does not participate</span> 
   </div>
        </td>

https://stackoverflow.com/a/18156912/205426

<table>
    <tbody ng-repeat="obj in rows">
        <tr ng-repeat="e in obj.row">
            <td>{{e}}</td>
        </tr>
        <tr>
            <td colspan="4">{{obj.description}}</td>
        <tr>
    </tbody>
</table>

Answer 3

不要将ng-repeat视为for循环。 Ng-repeat将在摘要周期中根据需要多次调用该函数，而不是每个项目调用一次。将模型变量分配给ng-if并在控制器中更新它

困惑为什么我的函数被ng-repeat的倍数调用

3 个答案: