时间:2021-05-28
前言
大家都知道默认在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恢复为
执行结果:
不明白的童鞋那就自己看看下面的运算表达式,猜猜结果是什么,然后在浏览器的控制台试一试你的答案是否正确
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果。分享给大家供大家参考,具体如下:1.首先重复回顾一下ng-repeat
AngularJS获取ng-repeat动态生成的ng-model值最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model=”变量”,
AngularJs的ng-repeat让我们非常方便的遍历数组生成Dom元素,但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下
Angularjs中ng-repeat的简单实例第一个例子:使用ng-repeat最简单的例子angularjs-demo学号姓名分数{{item.id}}{{
本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法。分享给大家供大家参考,具体如下:一、JS:ngApp.filter('unique',