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}}，output 將類似於：

1
2

但是，output 是：

1
1

AngularJS 似乎在 ng-repeat 中跳過了 ng-init 的第二次使用。 這是 AngularJS 的性能特征嗎？ 我正在使用 ng-init 來保存重新評估相同的表達式。

Answer 1

這不是錯誤， ng-init的這種用法是錯誤的。 初始化意味着設置變量的起始值，因此在您最后一次使用ng-init時，您正在初始化一個已經具有值的變量並“覆蓋”已經存在的變量。

更詳細地說： ng-init的第一個實例設置loopNumber = 0 ，因為 arrays 和索引以 0 開頭，而不是 1。然后你設置day = 0 0——此時，html 中{{day}}的兩個實例都會評估為 0。然后最后設置day = 1 ，因此{{day}}的 output 變為 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 。