当在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>