AngularJS——ng-repeat问题

AngularJS——ng-repeat问题

• 提高遍历速度

  • 说明

  ng-repeat会为每一次元素加上一个$$hashkey $$hashKey来识别每一个元素，当我们从后端重新获取数据时，即使数据完全一样，但是由于hashKey不一样，angular会删除之前的所有dom，重新生成新的dom。这样效率就会大大降低。可以理解为ng-repeat默认是 track by $$hashKey的。所以，我们应该使用一些不会变的东西来作为标识。

  • 代码

  [  
    {  
      "id": 1,  
      "name": "test1"  
    },  
    {  
      "id": 2,  
      "name": "test2"  
    }  
  

  <li ng-repeat="test in testList track by task.id"></li>  

  • 备注

  这样当重新获取数据时，由于id没有变，angular就不会去删除原来的dom，只会更新其中的内容，不同的id再添加新的dom。效率就能提升了。这相当于react中data-reactid的功能，这样angular并不比react慢。

• 解决重复项报错

  • 报错

  Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users, Duplicate key: number:1。

  • 解释

  这是因为ng-Repeat不允许collection中存在两个相同Id的对象。对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。因此数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。

  • 解决方式

  // 业务上自己生成唯一的id
  item in items track by item.id
  
  //或者直接拿循环的索引变量$index来用
  item in items track by $index

  • 备注

  如果是javascript对象类型数据，那么就算内容一摸一样，ng-repeat也不会认为这是相同的对象。