ng-repeat 与项目数组不一致答案

【问题标题】：ng-repeat not working consistently with arrays of itemsng-repeat 与项目数组不一致
【发布时间】：2015-12-21 05:17:59
【问题描述】：

我有两个要在页面中重复的字符串数组。以下是调试器中的数组（infoData 和 modelData）：

Chrome 检查器中的数组屏幕截图：

这是我的html：

<div ng-repeat="info in pTab.infoData">
    <p>{{info}}</p>
</div>

<div ng-repeat="stats in pTab.modelData">  
    <p>{{stats}}</p>
</div>

但是页面只显示infoData的内容，如下图：

XPE

www.sampleurl.com

Sample summary has nulla quis lorem ut libero malesuada feugiat...

我的问题是为什么会发生这种情况，我怎样才能让第二个数组的元素像第一个一样显示？

以下是一些可能对您有用的附加信息。当我尝试不同的事情时，这让我觉得很有趣：

以下 HTML：

<div ng-repeat="info in pTab.infoData">
    <p>{{pTab.infoData}}</p>
</div>

<div ng-repeat="stats in pTab.modelData">  
    <p>{{pTab.modelData}}</p>
</div>

将方括号中的 infoData 数组显示为字符串 3 次（infoData 的长度为 3）。而以下 HTML：

<div ng-repeat="info in pTab.infoData">
    <p>{{pTab.modelData}}</p>
</div>

<div ng-repeat="stats in pTab.modelData">  
    <p>{{pTab.infoData}}</p>
</div>

将方括号中的modelData数组显示为字符串3次。

<div ng-repeat="stats in pTab.modelData"> 有问题吗？因为该 div 中的任何内容都不会重复，即使我将该 div 移到 <div ng-repeat="stats in pTab.modelData"> 之前

如果我不清楚或者您想查看更多代码，请告诉我。非常感谢您的宝贵时间。

【问题讨论】：

请提供一个 Plunkr 演示该问题。页面上是否还有其他数据绑定？控制台是否有任何错误。
是的，显示整个 html 以及数据所在的控制器。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

如果您查看浏览器控制台，您会看到这样的错误

错误：[ngRepeat:dupes] 不允许在转发器中重复。使用“track by”表达式指定唯一键。中继器：pTab.modelData 中的统计信息，重复键：字符串：0.1 mg，重复值：0.1 mg

所以，你的第二个数组中有重复的项目，为了解决这个错误应该使用 track by 表达式，在这种情况下足够 $index

<div ng-repeat="stats in pTab.modelData track by $index">

您可以在文档中看到更多信息：Tracking and Duplicates

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.pTab = {
      modelData: [
        '0.1 mg',
        '0.1 mg',
        '0.1 mg'
      ]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='ctrl'>
  <h1>Hello Plunker!</h1>
  <div ng-repeat="stats in pTab.modelData track by $index">
    <p>{{stats}}</p>
  </div>
</div>

【讨论】：