AngularJS 使用ng-repeat报错 [ngRepeat:dupes]

阅读时长 4 分钟读完

当使用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

纠错
反馈