ng-init 在 ng-repeat 中使用了两次，只有第一个 ng-init 被评估

Question

见以下代码：

<tr ng-repeat="x in [].constructor(6) track by $index" ng-init="loopNumber = $index">
    <td class="border-right" style="width:10%;" ng-init="day = monthOfData[7 * loopNumber]">
        <p>{{day}}</p>
    </td>
    <td class="border-right" style="width:10%;" ng-init="day = monthOfData[7 * loopNumber+1]">
        <p>{{day}}</p>
    </td>
</tr>

我预计在使用 {{day}} 的地方，输出将类似于：

1
2

然而，输出是：

1
1

AngularJS 似乎跳过了 ng-repeat 中对 ng-init 的第二次使用。这是 AngularJS 的性能特征吗？我正在使用 ng-init 来保存重新计算相同的表达式。

Answer 1

这不是错误，ng-init 的用法是错误的。初始化意味着设置变量的起始值，因此在您最后一次使用 ng-init 时，您正在初始化一个已经有值的变量并“覆盖”已经存在的值。

更详细地说：ng-init 的第一个实例设置 loopNumber = 0 因为数组和索引以 0 开头，而不是 1。然后你设置 day = 0 —— 在那个时候，两者html 中 {{day}} 的实例计算结果为 0。最后设置 day = 1，因此 {{day}} 的输出变为 1。

请注意，这适用于您页面中使用 {{day}} 的 所有位置 ，而不仅仅是第三个 ng-init 之后的行。 ng-init 只有少数合适的用途（例如 ng-repeat 的特殊属性别名），这不是其中一种情况。

代码如何在没有 ng-init 的情况下工作的示例：

  <tr ng-repeat="x in [].constructor(6) track by $index">
    <td>
      <p>{{ monthOfData[7 * $index] }}</p>
    </td>
    <td>
      <p>{{ monthOfData[7 * $index + 1] }}</p>
    </td>
  </tr>

或者，由于您的 td 集团非常相似，我们可以像这样添加第二个循环：

  <tr ng-repeat="x in [].constructor(6) track by $index" ng-init="loopNumber = $index">
    <td ng-repeat="x in [].constructor(2) track by $index" ng-init="var = $index">
      <p>{{ monthOfData[7 * loopNumber + var] }}</p>
    </td>
  </tr>

请注意在第二个示例中如何使用 ng-init 来别名引用两个不同循环的 $index 的两个实例。这在第一个示例中不需要，我们可以在计算表达式时直接使用 $index。

ng-init 在 ng-repeat 中使用了两次，只有第一个 ng-init 被评估

ng-init Used Twice Inside ng-repeat, Only First ng-init is Being Evaluated

angularjs

angularjs-ng-repeat

ng-init