angularjs ng-repeat
- 要循环的数据
- 一定义和用法
- 二语法和参数值
- 1语法
- 2参数值
- 1expression为数组循环x in records
- 2expression为对象循环key value in myObj
- 3其他参数值
- 三ng-repeat和ng-repeat-startng-repeat-end
- 四特殊变量
- 五官网实例
- 六注意
- 参考文章
- demo
要循环的数据
$scope.friends = [{name:'John', age:25, gender:'boy'},{name:'Jessie', age:30, gender:'girl'},{name:'Johanna', age:28, gender:'girl'},{name:'Joy', age:15, gender:'girl'},{name:'Mary', age:28, gender:'girl'},{name:'Peter', age:95, gender:'boy'},{name:'Sebastian', age:50, gender:'boy'},{name:'Erika', age:27, gender:'girl'},{name:'Patrick', age:40, gender:'boy'},{name:'Samantha', age:60, gender:'girl'}];
一,定义和用法
ng-repeat 指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象。
二,语法和参数值
1,语法
<element ng-repeat="expression"></element>
所有的 HTML 元素都支持该指令。
2,参数值
(1),expression为数组循环:x in records
使用数组循环输出一个表格:
<table ng-controller="myCtrl" border="1"><tr ng-repeat="x in records"><td>{{x.Name}}</td><td>{{x.Country}}</td> </tr>
</table><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {$scope.records = [{"Name" : "Alfreds Futterkiste","Country" : "Germany"},{"Name" : "Berglunds snabbköp","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","Country" : "Mexico"},{"Name" : "Ernst Handel","Country" : "Austria"}]
});
</script>
(2),expression为对象循环:(key, value) in myObj
使用对象循环输出一个表格:
<table ng-controller="myCtrl" border="1"><tr ng-repeat="(x, y) in myObj"><td>{{x}}</td><td>{{y}}</td> </tr>
</table><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {$scope.myObj = {"Name" : "Alfreds Futterkiste","Country" : "Germany","City" : "Berlin"}
});
</script>
(3),其他参数值
item in items track by $id(item) 相当于 item in items
ng-repeat会为每一个元素加上一个$$hashKey来识别每一个元素,当我们从后端重新获取数据时,即使数据完全一样,但是由于hashKey不一样,angular会删除之前的所有dom,重新生成新的dom。这样效率就会大大降低。可以理解为ng-repeat默认是 track by $hashKey的。所以,我们应该使用一些不会变的东西来作为标识,比如后端数据的id.
item in items track by item.id
这样当重新获取数据时,由于id没有变,angular就不会去删除原来的dom,只会更新其中的内容,不同的id再添加新的dom。效率就能提升了。这相当于react中data-reactid的功能,这样angular并不比react慢。
item in items track by $index
按索引变量$index循环
三,ng-repeat和(ng-repeat-start,ng-repeat-end)
ng-repeat和(ng-repeat-start,ng-repeat-end)都是循环一个items, 区别是ng-repeat-start,ng-repeat-end可以跨越多个标签, 而ng-repeat只能在一个标签里面循环!
<header ng-repeat-start="friend in friends">Header {{ friend.name }}</header><div class="body">Body {{ friend.age }}</div><footer ng-repeat-end>Footer {{ friend.gender }}<hr></footer>
四,特殊变量
ng-repeat里面提供了几个变量,为开发者提供一些快捷的操作,
$index: 表示当前item的索引,
$first:如果item为第一个,那么first为true,
$middle:如果item不是开头,不是结尾,那么middle为true,
$last:如果item为最后一个,那么last为true,
$even:如果索引为偶数,那么even为true,
$odd:如果索引为奇数,那么odd为true
五,官网实例
item in items | filter : x as results ,结果filter过滤后的 结果会被保存到results
I have {{friends.length}} friends. They are:<input type="search" ng-model="q" placeholder="filter friends..." /><ul class="example-animate-container"><li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.</li><li class="animate-repeat" ng-if="results.length === 0"><strong>No results found...</strong></li></ul>
六,注意
1,如果要循环的数组是这样的$scope.dataList = [1,2,1];
会报错
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表达式。
如果是javascript对象类型数据,那么就算内容一摸一样,ng-repeat也不会认为这是相同的对象。
如果$scope.dataList = [{“age”:10},{“age”:10}];,那么是不会报错的。
2,慎用$index作为增删改查数据的依据,由于经过filter过滤后,index的值已经变化,会引起错误,最好直接取item对象去增删改查!
参考自:http://blog.csdn.net/renfufei/article/details/43061877
3,track by 一定要放在orderBy之后,否则会影响orderBy的效果。
参考文章:
https://docs.angularjs.org/api/ng/directive/ngRepeat
http://www.tuicool.com/articles/Z3eiQz
demo
http://download.csdn.net/detail/superjunjin/9710594
angularjs ng-repeat相关推荐
- angularjs学习总结 详细教程
本文详细讲解了前言.AngularJS概述.AugularJS特性.功能介绍.功能演示.功能演示.AngularJS进阶.总结七部分,可能会与原文略有不同. 不理解请看原文(尤其是代码部分),本文仅供 ...
- angularjs学习总结(资料收集)
angularjs学习总结(资料收集) 原文地址https://blog.csdn.net/weixin_33178524/article/details/79179597 1 前言 前端技术的发展是 ...
- .Net Core应用框架Util介绍(一)
距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...
- 访客模式 无痕模式 区别_访客设计模式示例
访客模式 无痕模式 区别 本文是我们名为" Java设计模式 "的学院课程的一部分. 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们. 您将了解模式如 ...
- 用c语言编制牛顿法程序,求解试用newton法求函数,YTU 2405: C语言习题 牛顿迭代法求根...
2405: C语言习题 牛顿迭代法求根 时间限制: 1 Sec 内存限制: 128 MB 提交: 562 解决: 317 题目描述 用牛顿迭代法求根.方程为ax3+bx2+cx+d=0.系数a,b ...
- JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...
- 3.2 YOLOv3 SPP源码解析
前言 随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容.来源于哔哩哔哩博主"霹雳吧啦Wz",博主学习作为笔记记录,欢 ...
- 前端基本面试题 重点掌握** vue 20220110
目录 1.forEach和map的区别到底有什么区别呢? 2.前端常用解析模板引擎 artTemplate 模板 underscore 模板 Handlebars 模板 3.singlepage是什么 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- AngularJs出现错误Error: [ng:areq]
1.没有对应的控制器 2.有控制器但是路径没有配对 转载于:https://www.cnblogs.com/muou2125/p/9543209.html
最新文章
- loadrunner用javavuser进行接口测试
- 蓝色三角_梅山!长三角唯一近海蓝色海湾成网红打卡地
- Python基础语法精心总结!看完都知道的可以往下继续学习了
- Scala特质可以继承Java类及限制特质的使用
- 2012年12月第二个周末
- php快速开发框架津县,BetePHP:一个轻量级快速开发框架
- java如何通过grpc连接etcd_grpc通过 etcd 实现服务发现与注册-源码分析
- Python 构建前端 页面继承及共享 - 转
- java实验的总结_java实验总结
- DDK nmake : error 解决方法
- 【应用赏析】Las Vegas利用ParkPad(基于ArcPad)实现公园资产管理
- LAMMPS分子动力学模拟技术与应用 第一性原理计算方法及应用
- 萤火商城前端页面搭建(一)
- 英尺英寸和厘米的换算_中国的尺和厘米的换算,英尺英寸和厘米换算
- 通信原理-确定信号分析
- 2013我爱逻辑题(2)
- EOS核心仲裁论坛 | 保障你财产安全的应急措施
- 大神来看看我写的构造函数及闭包
- 第一次使用acme.sh 手动生成证书(DNS手动模式)
- 关于MongoDB的Write Concern