angular ng-repeat中DOM的重新渲染机制（项目中遇到问题）

昨天在项目中遇到一个问题：

文本框中输入值只要变化就要请求接口获取数据赋值给couponData，这样性能不好。所以和服务器端沟通改成了服务器端一次性返回所有数据，这样前端只要获取一次数据然后保存在对象里面，然后当输入值变化根据匹配规则自己来判断。
但是输入值变化每次请求接口获取值赋给couponData之后是可以重新渲染DOM元素的；一次获取保存在对象里面是不能重新渲染DOM元素的！我就查了一下原因如下：
输入值变化每次请求接口获取值赋给couponData之后，看一下couponData值如下（每次发请求这个$$hashkey都会变化）：

我们可以看到 ng-repeat 往数组里每个元素加了一个 $$hashKey 的属性，用于绑定DOM。这个 key 是由 Angular 内部的 nextUid() 方法生成，类似数据库自增，但是是使用字符串。

查看 ng-repeat 的源码可以发现，当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素，而是直接将其全部删除并重新生成新的数组 Dom 元素：

// 将上次生成的所有 dom 移除

for (key in lastBlockMap) {

    if (lastBlockMap.hasOwnProperty(key)) {

        block = lastBlockMap[key];

        elementsToRemove = getBlockElements(block.clone);

        $animate.leave(elementsToRemove);

        forEach(elementsToRemove, function(element) { element[NG_REMOVED] = true; });

        block.scope.$destroy();

    }

}

这就是每次都请求接口赋值给couponData之后是会重新生成新的 $$hashKey 值，所以会重新渲染DOM元素；所以只获取值一次保存在对象里面不会重新渲染的原因是因为$$hashKey 没有变化导致的，是重用DOM元素，为了解决这个问题，我用随机数方式重新复制给$$hashkey就可以了。