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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
你真的了解JavaScript吗?
Feb 24 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
Vue 组件注册全解析
Dec 17 Vue.js
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正则
2006/07/07 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JQuery 入门实例1
2009/06/25 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
2015年实习单位评语
2015/03/25 职场文书
爱国影片观后感
2015/06/18 职场文书