angularJS里的ng-repeat的坑

情景：

一般我们写代码的时候需要渲染列表等。

实现：

使用ng-repeat可以实现。

ng-repeat的坑：

ng-repeat这个指令在运行时如果列表数据里有重复的值时会抛出异常，这是因为ng-repeat在渲染数据时会重新编译需要渲染的数据，给每个元素加上一个唯一的$$hashKey属性可以与生成的dom绑定，以便追。如果元素重复，会导致自动生成$$hashKey错误。

解决办法：

ng-repeat = "item in items track by $index"
track by $index是不去用angular自动生成$$hashKey，而是直接把元素的索引拿来绑定。
使用track by的好处：ng-repeat的数组被替换时, 它默认并不会重新利用已有的 dom 元素，会删除所有再次重新渲染。加了track by,会给当前已有dom元素加上标示，会利用已有元素，如果已有元素里已存在，就不会去重新渲染。

使用$index的坑

使用$index的场景.png

场景如图，当你展示的列表需要过滤时，而你过滤出来的列表用户可能会去做增删改变顺序的操作，可能会暴露出来的bug是会发现你操作删除后你并不想删除的一个元素被删除了。问题所在是因为过滤前数据的index和过滤后的index会不一样，因为index绑定在当前的item里了，所以类似操作index需要谨慎操作。

解决办法：

可以在渲染数据前我们给数据手动生成item.id属性来代替$index。