您的位置：首页 > 编程技术 > js  >  AngularJS ng-repeat数组有重复值的解决方法

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

 更新时间：2016年10月25日 10:01  点击：1910

前言

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

如：

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

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

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

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

点击错误链接到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>

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

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

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

html恢复为

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

执行结果：

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

[] === []

总结

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

[!--infotagslink--]

相关文章

  • javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-04-16

  • Angular.js中下拉框实现渲染html的方法

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24

  • thinkPHP中多维数组的遍历方法

    这篇文章主要介绍了thinkPHP中多维数组的遍历方法,以简单实例形式分析了thinkPHP中foreach语句的使用技巧,需要的朋友可以参考下...2016-01-12

  • angular.js指令中transclude选项及ng-transclude指令详解

    这篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料，文中介绍的非常详细，并给出了完整的示例代码大家参考学习，需要的朋友们下面来一起看看吧。...2017-05-27

  • JavaScript数组去重的几种方法效率测试

    JavaScript数组去重是前端面试酷爱的问题，问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多，到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据，随着数据越多效率很明显的就体验了出来。下面来一起看看吧。...2016-10-25

  • JavaScript数组去重的两种方法推荐

    下面小编就为大家带来一篇JavaScript数组去重的两种方法推荐。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看...2016-04-06

  • JavaScript常用字符串与数组扩展函数小结

    这篇文章主要介绍了一些JavaScript常用字符串与数组扩展函数,整理了一些简单而使用率又高的操作String与Array的函数,需要的朋友可以参考下...2016-04-25

  • Angular2中Bootstrap界面库ng-bootstrap详解

    不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。...2016-10-20

  • JavaScript数组方法总结分析

    下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-05-09

  • js实现字符串和数组之间相互转换操作

    这篇文章主要介绍了js实现字符串和数组之间相互转换操作的相关资料，感兴趣的小伙伴们可以参考一下...2016-01-14

  • JavaScript中数组添加值和访问值常见问题

    这篇文章主要介绍了JavaScript中数组添加值和访问值常见问题的相关资料...2016-02-12

  • Angular.js基础学习之初始化

    这篇文章主要介绍了Angular.js基础学习之初始化的相关资料，AngularJS 启动有两种方式，一种是绑定初始化，自动加载，另外一种是手动初始化，文中介绍的很详细，需要的朋友可以参考下。...2017-03-13

  • 根据key删除数组中指定的元素实现方法

    下面小编就为大家带来一篇根据key删除数组中指定的元素实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-03-12

  • JavaScript中数组去除重复的三种方法

    本文通过三种方法给大家介绍js数组去除重复的方法，实用性非常高，感兴趣的朋友一起学习吧...2016-04-24

  • Angular.js指令学习中一些重要属性的用法教程

    这篇文章主要给大家介绍了关于Angular.js指令学习中一些重要属性的用法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-05-27

  • PHP实现二维数组去重功能示例

    这篇文章主要介绍了PHP实现二维数组去重功能,涉及php针对数组的遍历、判断、设置等相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2017-01-15

  • PHP实现移除数组中为空或为某值元素的方法

    这篇文章主要介绍了PHP实现移除数组中为空或为某值元素的方法,涉及php使用array_filter过滤数组的相关操作技巧,需要的朋友可以参考下...2017-01-15

  • 浅析jquery数组删除指定元素的方法:grep()

    下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • PHP 将数组打乱 shuffle函数的用法及简单实例

    下面小编就为大家带来一篇PHP 将数组打乱 shuffle函数的用法及简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-06-24

  • PHP数组去重比较快的实现方式

    使用PHP的array_unique()函数允许你传递一个数组，然后移除重复的值，返回一个拥有唯一值的数组，通过本文给大家介绍PHP数组去重比较快的实现方式，需要的朋友参考下本文...2016-01-21