AngularJS ng-repeat使用及注意事项
用法:ng-repeat="extension";
extension(表达式) 定义了如何循环集合。
表达式实例规则：
1. x in records
2. (key,value) in myObj
3. x in records track by $id(x)
我们可以使用ng-repeat指令遍历一个JavaScript数组，当数组中有重复元素的时候，AngularJS会报错:
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。
如下面的代码就会报错：
<!DOCTYPE html>
<html ng-app="app" ng-controller="appCtrl">
<head>
<title>Self Document</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
var app = angular.module('app',[]);
app.controller('appCtrl',function($scope,$element){
$scope.dataList = [1,2,1];
});
</head>
<body>
<div ng-repeat="value in dataList">
<p>
<span ng-bind="value"></span>
</p>
</div>
</body>
</html>
这是因为ng-repeat不允许集合中存在两个相同id的对象。
For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.
对于数字或者字符串等基本数据类型来说，它的id就是它自身的值。因此数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。
// 业务上自己生成唯一的id
1. item in items track by item.id
//或者直接拿循环的索引变量$index来用
2. item in items track by $index
另外：如果集合是Javascript对象类型数据，那么就算值一摸一样，ng-repeat也不会认为这是相同的对象。
如果将上面的代码中dataList，那么是不会报错的。比如$scope.dataList = [{"num":10},{"num":10}];
参考文章：http://blog.csdn.net/aitangyong/article/details/44100921
AngularJS ng-repeat使用及注意事项的更多相关文章
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- AngularJs压缩时须要注意的事项
因为AngularJS是通过控制器构造函数的參数名字来判断依赖服务名称的.所以假设你要压缩控制器的JS代码.它全部的參数也同一时候会被压缩,这时候依赖注入系统就不能正确的识别出服务了. 假如我们的Co ...
- part 4 AngularJS ng src directive
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- table sorting–angularjs
1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...
- [译]用AngularJS构建大型ASP.NET单页应用（三）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...
- [AngularJS] AngularJS系列(1) 基础篇
目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...
- 从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...
- angularJS看MVVM
从angularJS看MVVM javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到a ...
- js架构设计模式——从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...
随机推荐
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- C++ UI资源
最近又来搞界面了,现把这几天收集到的资料汇总下,方便今后慢慢学习! Duilib: Duilib是一个Windows下免费开源的DirectUI界面库,由于简约易扩展的设计以及稳定高效的实现被各大互联 ...
- java中的缓冲流BufferedWriter和BufferedReader
java中的缓冲流有BufferedWriter和BufferedReader 在java api 手册中这样说缓冲流: 从字符输入流中读取文本,缓冲各个字符,从而实现字符.数组和行的高效读取.可以指 ...
- Python基础学习参考（二）：基本语法
一．基本语法 既然是学习一门语言,它肯定有区别与其它语言的语法规则,现在就来解释一下python的语法规则是什么? 注释:通过"#"可以对python进行注释,注意是单行注释,如果 ...
- 0_Simple__cppIntegration
引用已经编好的 .cu 和 .cpp 代码来混合使用.在 main.cpp 中调用了使用GPU的 cppIntegration.cu (测试函数也在其中) 和使用CPU的 cppIntegration ...
- 【Kafka源码】SocketServer启动过程
SocketServer主要用于接收外部的网络请求,并把请求添加到请求队列中. 一.入口 在KafkaServer.scala中的start方法中,有这样的入口: socketServer = new ...
- RPA（Robotic Process Automation）的概要介绍
最近因为公司业务的需要,开始关注RPA的内容,奈何国内相关的信息太少,只能硬着头皮啃英文了. 下面记录的内容作为学习笔记,有不对的地方请大家指教. 首先RPA(Robotic Process Auto ...
- mysql +keeplive
下载tar包 ./configure --prefix=/usr/local/keepalived --with-kernel-dir=/usr/src/kernels/2.6.32-431.el6. ...
- Spring知识整理
Spring简介 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架,用来管理和维护bean,其中的特点是IOC(控制反转) DI(依赖注入) AOP(面向切面) 容易和其他框 ...
- ldap数据库--ODSEE--ACI
查看跟DN下的aci ldapsearch -h hostname -p port -D "cn=Directory Manager" -w - -b "BASE_DN& ...