当前位置：首页 > 资讯 > 技术文档

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

时间：2021-11-30 02:46 编辑：来源：阅读：
扫一扫，手机访问

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

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

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

这个数组[code]blue[/code]就重复了，html这么遍历它

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

[b]控制台就会抛出一个错误：[/b] [img]http://files.jb51.net/file_images/article/201610/2016102395752073.jpg?20169239581[/img] 点击错误链接到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

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

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

[b]于是按照这个方案改了一下[/b]

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

[b]刷新网页，内容被正常解析[/b] [img]http://files.jb51.net/file_images/article/201610/20161023100102936.jpg?201692310110[/img] 其实[code]ng-repeat[/code]还是需要一个唯一的[code]key[/code]，只不过你不[code]track[/code]的话默认就是[code]item[/code]本身，另外也只有在普通数据类型字符串，数字等才会出现这个问题，如果换成[code]Object[/code]

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

[b]html恢复为[/b]

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

[b]执行结果：[/b] [img]http://files.jb51.net/file_images/article/201610/20161023100150382.jpg?201692310158[/img] 不明白的童鞋那就自己看看下面的运算表达式，猜猜结果是什么，然后在浏览器的控制台试一试你的答案是否正确

[] === []

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

全部评论(0)

上一篇：AngularJS实现根据变量改变动态加载模板的方法
下一篇：使用AngularJS来实现HTML页面嵌套的方法

资讯排行榜
更多>>