javascript - ng-repeat 与项目数组不一致

Question

我想在页面中重复两个字符串数组。以下是调试器中的数组(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 ng-repeat="stats in pTab.modelData"> 前面，该 div 中的任何内容都不会重复。

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

Answer 1

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

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: stats in pTab.modelData, Duplicate key: string:0.1 mg, Duplicate value: 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>