AngularJS ng-repeat数组有重复值的解决方法


Posted in Javascript onOctober 23, 2016

前言

大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的。

如:

$scope.items = [
 'red',
 'blue',
 'yellow',
 'white',
 'blue'
];

这个数组blue就重复了,html这么遍历它

<li ng-repeat="item in items">{{ item }}</li>

控制台就会抛出一个错误:

AngularJS ng-repeat数组有重复值的解决方法

点击错误链接到Angular官网看详细错误,官网明确给出是因为值重复了:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: blue

解决方法

这就纳闷了,正常的业务里数组有重复的值是很正常的,数组要硬要搞成唯一的ng-repeat才能遍历就白瞎了,继续往下看,发现官网给了一个解决的方案

<div ng-repeat="value in [4, 4] track by $index"></div>

于是按照这个方案改了一下

<li ng-repeat="item in items track by $index">{{ item }}</li>

刷新网页,内容被正常解析

AngularJS ng-repeat数组有重复值的解决方法

其实ng-repeat还是需要一个唯一的key,只不过你不track的话默认就是item本身,另外也只有在普通数据类型字符串,数字等才会出现这个问题,如果换成Object

$scope.items = [
 ['red'],
 ['blue'],
 ['yellow'],
 ['white'],
 ['blue']
];

html恢复为

<li ng-repeat="item in items">{{ item }}</li>

执行结果:

AngularJS ng-repeat数组有重复值的解决方法

不明白的童鞋那就自己看看下面的运算表达式,猜猜结果是什么,然后在浏览器的控制台试一试你的答案是否正确

[] === []

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
web前端开发upload上传头像js示例代码
Oct 22 #Javascript
jQuery中$.ajax()方法参数解析
Oct 22 #Javascript
详解Javascript函数声明与递归调用
Oct 22 #Javascript
js中利用cookie实现记住密码功能
Aug 20 #Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 #Javascript
微信开发 消息推送实现代码
Oct 21 #Javascript
微信和qq时间格式模板实例详解
Oct 21 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python 文件转成16进制数组的实例
2018/07/09 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python编写俄罗斯方块
2020/03/13 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
编程实现去掉XML的重复结点
2014/05/28 面试题
写给女朋友的道歉信
2014/01/12 职场文书
酒鬼酒广告词
2014/03/21 职场文书
运动会演讲稿
2014/05/07 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
弄虚作假心得体会
2014/09/10 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
大学生自荐材料范文
2014/12/30 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
新郎新娘致辞
2015/07/31 职场文书