刚刚看见一篇文章讲述track by的功能的,大致记录如下:

1. ng-repeat="friend in friends"

一般不使用track by的情况下,每次刷新DOM,ngRepeat都会删除原有的元素DOM重新生成DOM结构。

2.ng-repeat="friend in friends track by friend.id"

而使用track by后,则可以告诉ngRepeat directive 使用id属性,识别实例与渲染DOM节点之间的关联,从而可以利用已有的DOM元素,不需要整个儿删除重新渲染降低性能。

原文地址:http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

ngRepeat track by的更多相关文章

  1. angular ng-repeat点击切换样式,浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

  2. Generate List and Table via ng-repeat

    <div ng-app ng-controller='StudentListController'> <ul> <li ng-repeat='student in stu ...

  3. 学习笔记 - 数据绑定之knockout

    参考: http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html http://knockoutjs.com/documentation ...

  4. 用angularjs开发下一代web应用(二):angularjs应用骨架(二)

    1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有下面不同之处 ...

  5. 使用angular中ng-repeat , track by的用处

    我们见到最简单的例子是: <div ng-repeat="link in links" ></div> 如果item的值有重复的,比如links=[&quo ...

  6. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

    错误原因在于出现相同内容. 原写为: <li ng-repeat="log in logs" scroll-down> {{log}}</li> 改写为: ...

  7. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq

    angularjs 使用ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in ...

  8. ng-repeat指令中使用track by子语句解决重复数据遍历的错误

    用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...

  9. ng-repeat出现环路输出Duplicates in a repeater are not allowed. Use &#39;track by&#39; expression to specify unique

    采用ng-repeat循环发生错误时,如下面的输出对象: Duplicates in a repeater are not allowed. Use 'track by' expression to ...

随机推荐

  1. golang的Channel

    golang的Channel Channel 是 golang 一个非常重要的概念,如果你是刚开始使用 golang 的开发者,你可能还没有真正接触这一概念,本篇我们将分析 golang 的Chann ...

  2. JavaWeb王者归来学习笔记

    JavaWeb王者归来学习笔记... Ajax王者归来: Ajax:Asynchronous JavaScript And XML -------Ajax 是一些旧有技术的结合.但却以一种新的姿态.披 ...

  3. C#异步编程(async and await)及异步方法同步调用

    1.什么是异步? 异步操作通常用于执行完成时间可能较长的任务,如打开大文件.连接远程计算机或查询数据库=异步操作在主应用程序线程以外的线程中执行.应用程序调用方法异步执行某个操作时,应用程序可在异步方 ...

  4. Visual Studio 编译使用FLTK库

    FLTK介绍 FLTK (Fast Light Tool Kit 发音为fulltick) 是一种使用C++开发的GUI工具包,它可以应用于Unix,Linux,MS-Windows95/98/NT/ ...

  5. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  6. Windows 8 快捷键

    三月份,Kurt Walter 在 Windows团队博客中发表了一篇介绍 Windows 8 和全新快捷键的精彩文章. Windows 8 提供了出色的触摸体验,但在我的台式机上使用了几个月后我还发 ...

  7. 使用Groovy处理SoapUI中Json response

    最近工作中,处理最多的就是xml和json类型response,在SoapUI中request里面直接添加assertion处理json response的话,可以采用以下方式: import gro ...

  8. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  9. 最新Windows下Redis集群

    实现简单的Windows下Redis集群配置,以下是配置过程中出现的几个问题: [1]逐个启动7001 7002 7003 7004 7005 7006节点时,出现createing server T ...

  10. webservice中jaxws:server 和jaxws:endpoint的区别

    今天在学习使用spring+cxf发布webservice时遇到个问题,我原来是用 <jaxws:endpoint id="helloWorld" implementor=& ...