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

【问题标题】：ng-init Used Twice Inside ng-repeat, Only First ng-init is Being Evaluatedng-init 在 ng-repeat 中使用了两次，只有第一个 ng-init 被评估
【发布时间】：2021-04-23 16:37:31
【问题描述】：

见以下代码：

<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 来保存重新评估相同的表达式。

【问题讨论】：

第一个循环，我假设loopNumber == 0 所以7*loopNumber 的值是0，然后你加1....这不是角度问题，而是代码问题跨度>

标签： angularjs angularjs-ng-repeat ng-init

【解决方案1】：

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

更详细地说：ng-init 的第一个实例设置了loopNumber = 0，因为数组和索引以 0 开头，而不是 1。然后你设置 day = 0——此时，{{day}} 的两个实例都在你的 html 中将评估为 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。

【讨论】：