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
最新文章
- Boyang Tex上海帛扬时装面料有限公司
- 【推荐】关于JS中的constructor与prototype【转】
- Pythont特殊语法filter,map,reduce,apply
- 接受map_[译] 图解 Map、Reduce 和 Filter 数组方法
- 利用树的先序和后序遍历打印os中的目录树
- C/C++字符串输入方法比较(带回车不带回车输入)
- 阿拉伯数字转换成中文大写
- gbq6什么软件能打开_GBQ5是啥文件,用哪个软件打开
- 2021年中国人工智能市场发展现状
- 2019年第二阶段我要变强个人训练赛第十五场
- 基于GoogleMap,Mapabc,51ditu基于GoogleMap,Mapabc,51ditu,VirtualEarth,YahooMap Api接口的Jquery插件的通用实现(含源代码下载)
- html5苹果手机视频不自动播放,HTML5 解决苹果手机不能自动播放音乐问题
- 瑞华吉瑞保重大疾病保险怎么样?好不好
- 竞赛资讯|A股上市公司季度营收预测
- Linux下多个进程可以同时打开同一个文件吗?文件描述符与打开文件的关系?
- 【软著】分享一次自己申请软件著作权的历程
- 分析20万条弹幕告诉你,8.9分的高分剧《隐秘的角落》到底好看在哪儿?
- 2018 dota2 战队十杀分析
- Spring事务管理(应对面试)
- 初识人工智能身份证识别身份证号码