当使用AngularJS中的ng-repeat指令时，可能会遇到错误信息[ngRepeat:dupes]。这个错误提示很有用，因为它表明了您尝试在ng-repeat中重复渲染相同的数据。
什么是ng-repeat指令？
ng-repeat指令是AngularJS的一种核心指令，用于将数组或对象中的元素重复渲染到HTML页面上，以便通过模板创建动态内容。
ng-repeat的用法
在HTML页面中使用ng-repeat指令时，可以将指令添加到带有ng-app指令的元素上，然后使用ng-repeat指令来绑定要重复的数据。以下是一个使用ng-repeat的简单示例：
---- ---------------
----
--- --------------- -- --------------------
-----
------在这个示例中，我们使用ng-repeat指令将items数组中的每个元素渲染为HTML列表项。{{item}}部分是AngularJS模板语法，它将从items数组中获取当前元素并显示在HTML页面上。
[ngRepeat:dupes]错误
如果您尝试在ng-repeat中重复渲染相同的数据，就会遇到[ngRepeat:dupes]错误。例如，在以下示例中，我们尝试将具有相同名称的两个对象添加到items数组中进行渲染：
---- ---------------
----
--- --------------- -- -------------------------
-----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - ---------------- ---------------- ----------------
---
---------当我们运行这个例子时，会得到以下错误消息：
------ ---------------- ---------- -- - -------- --- --- -------- --- ------ --- ---------- -- ------- ------ -----
这个错误提示我们使用'track by'表达式来指定唯一的键。因此，我们可以将我们的ng-repeat指令修改为：
--- --------------- -- ----- ----- -- --------------------------
在这里，我们使用'track by $index'表达式告诉AngularJS按照数组索引值而不是默认的对象引用来跟踪元素。这样就可以避免重复渲染相同的数据。
总结
ng-repeat指令是AngularJS的核心指令之一，用于在HTML页面上动态渲染数据。但是，如果您尝试在ng-repeat中重复渲染相同的数据，就会遇到[ngRepeat:dupes]错误。通过使用'track by'表达式来指定唯一的键，您可以解决这个问题，并确保正确地渲染您的数据。
示例代码
--------- -----
------
------
---------------- --------- ------------
------- ------------------------------------------------------------------------------------
-------
------
---- -------------- -----------------------
----
--- --------------- -- ----- ----- -- --------------------------
-----
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - ---------------- ---------------- ----------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/1001