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 日期处理之时区问题
Oct 08 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 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 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
Prototype Date对象 学习
2009/07/12 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
javascript date格式化示例
2013/09/25 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Ionic快速安装教程
2016/06/03 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python获取apk文件URL地址实例
2013/11/01 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
文艺晚会主持词
2014/03/24 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers