當在ng-repeat中使用過濾器通過$ index跟蹤時，AngularJs錯誤

Question

我在ng-repeat列表上使用過濾器並按track by $index時遇到麻煩。 我有一個旅館列表，需要按城市名稱過濾。

過濾器工作正常，這不是問題。 問題是過濾器之后的呈現列表。 目前有2種情況：

• 1：如果不使用track by或使用track by item.id ，則開始時沒有錯誤，但是如果選擇一個選項，則會出現錯誤： [ngRepeat:dupes] ，可以通過使用track by $index來解決track by $index 。

• 2：如果使用track by $index進行track by $index則無論選擇什么選項都沒有錯誤。 但是，該列表未正確更新。 當我選擇一個城市時，列表將顯示結果數量，但不會顯示正確的結果。 例如，如果總共有12家酒店，則選擇之后只有4個結果。 該列表將有4個結果，但它不會更新結果，只會將列表縮小為4個結果，但順序相同。

例如，請參見此plunkr： https ://plnkr.co/edit/J1QQCM?p = preview

如果您按“紐約”進行過濾，則該列表將僅包含4個結果，但不會對列表進行重新排序以顯示城市“紐約”的結果。 這僅在使用track by $index時發生。

這是我正在使用的html：

<li ng-repeat="item in vm.mainList | filter:{location:filterLocation} track by $index">...</li>

數組是非常基本的東西，像這樣：

{
    "id": 0,
    "title": "Hotel The Mirage (Hotel & Casino)",
    "location": "Las Vegas, USA"
},
{
    "id": 1,
    "title": "Wynn Las Vegas",
    "location": "Las Vegas, USA"
},[...]~

---

注意：我知道我可以通過使用track by item.id來解決此track by item.id ，但這是一個簡單的示例。 在實際的列表上，我有更多的嵌套數組，最終我將以id重復結束。 因此，我需要能夠使用track by $index 。

Answer 1

它不起作用，因為您使用的是一次性綁定語法。

我已經分叉了您的plunkr並使用了常規語法，它可以正常工作： https ://plnkr.co/edit/mLaiqsrk9uUqnaYe308F?p=preview

  <ul>
    <li ng-repeat="item in vm.mainList | filter:{location:filterLocation} track by $index">
        <h4>{{ item.title }} - {{$index}}</h4>
        <p>{{ item.location }}</p>
    </li>
  </ul>