ngRepeat — 基礎篇

ngRepeat 也就是 ng-repeat,內建了很多方便的變數讓我們使用。

變數

  • $index
  • $first
  • $middle
  • $last
  • $even
  • $odd
  1. Number Variable — $index
    每一筆 repeat 出來的 Data, 其實都會帶有 $index(從 0 開始)
    使用情境
    當你想要在 repeat 產生的每一筆 Data 上,加入序號時。
  2. Boolean Varable — $first、$middle、$last
    $first 符合第一個值
    $middle 符合除了第一個與最後一個以外的所有值
    $last 符合最後一個值
  3. Boolean Variable — $even、$odd
    $even 偶數
    $odd 奇數

多個元素一起迭代

通常 ng-repeat 只會用在同一個元素作迭代

例如:

words = [ '可樂', '薯條', '雞塊' ];
<ul>
<li ng-repeat="word in words">{{ word }}</li>
</ul>
<ul>
<li>可樂</li>
<li>薯條</li>
<li>雞塊</li>
<ul>

但也有許多情況,會需要讓多個元素一起迭代,因此就有了 ng-repeat-start(起點)搭配 ng-repeat-end(終點)這樣的方法可以使用。


注意隱藏地雷

就是它會使用 $$hashkey 來判斷產生的物件是否有重複(也是為了不要浪費資源複製同樣的物件),因此每個產生出來的東西,ngRepeat 都會自動附上 $$hashkey 來當作辨識的標籤。

然後陣列(Array)被預設會使用陣列內容來當作 $$hashkey,因此如果有:

ng-repeat = "n in [1, 2, 1, 3, 5]"

此時,因為內容有兩個 1,被 ng-repeat 拿來當作 $$hashkey,這時重複了就會產生錯誤。

Angular 當然有發現這樣的問題,就是使用 track by 來解決:

ng-repeat="n in [1, 2, 1, 3, 5] track by $index"

但必須注意一點:track by 的值,必須要有唯一性

Show your support

Clapping shows how much you appreciated Ryan’s story.