刚刚看见一篇文章讲述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. WeQuant交易策略—Dual Thrust

    Dual Thrust策略 策略介绍 Dual Thrust是一个趋势跟踪系统,由Michael Chalek在20世纪80年代开发,曾被Future Thruth杂志评为最赚钱的策略之一. Dual ...

  2. 使用webpack热加载,开发多页面web应用

    我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...

  3. python的multiprocessing模块进程创建、资源回收-Process,Pool

    python的multiprocessing有两种创建进程的方式,每种创建方式和进程资源的回收都不太相同,下面分别针对Process,Pool及系统自带的fork三种进程分析. 1.方式一:fork( ...

  4. 安装python+setuptools+pip+nltk

    环境:Win10 64 + python 2.7 32 bit Source installation (for 32-bit or 64-bit Windows) 1.Install Python: ...

  5. JavaScript即时判断输入密码的强度

    源码示例: 1.javascript代码 <script type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. fu ...

  6. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  7. python进阶学习(三)

    本节通过SQLite了解数据库操作 ------------------------- 数据库支持 使用简单的纯文本只能实现有退限的功能,所需要引入数据库,完成更强大的功能,本节使用的简单数据库SQL ...

  8. python之VSCode安装

    [之前发布到本人的51cto博客,现转过来] 1.安装python3.5(3.6版本亲测无法实现命令补全功能) 2.安装VSCode(我的版本:VSCode-win32-1.7.2) 3.安装Pyth ...

  9. 基于dijkstra算法求地铁站最短路径以及打印出所有的路径

    拓展dijkstra算法,实现利用vector存储多条路径: #include <iostream> #include <vector> #include <stack& ...

  10. python 斐波那契数列 fibonacci

    在python中生成fibonacci数列的函数 def fibonacci(): list = [] while 1: if(len(list) < 2): list.append(1) el ...