Javascript 为什么这个ng重复没有循环所有的值？

甚至更多的值被推送到数组中：

.controller('MyCtrl', function($scope) {

  $scope.mottos = [];
  $scope.mottos.push('One');
  $scope.mottos.push('Two');

  $scope.addMotto = function(motto) {
    $scope.mottos.push(motto);
  }    
});

及

{{座右铭}

ng repeat未按预期显示所有元素：，为什么？

HTML

单击我添加更多。。。
{{格言长度}
{{座右铭}

而不是这个

 <span ng-repeat="motto in mottos"> {{motto}} </span>

{{座右铭}

试试这样的

 <span ng-repeat="motto in mottos track by $index"> {{motto}} </span>

{{座右铭}

---

您可以在第

页上看到更多详细信息，因为您需要使用

$track by

他的解决方案实际上是在这里描述的：

{{座右铭}

出现问题的原因是

ng repeat

没有每个对象的唯一标识符。如果将代码更改为在每个对象上追加长度（more1、more2、more3等，因为长度/索引是唯一的），则可以正常工作。我在WPF中看到过类似的问题

来自：

默认情况下，

ngRepeat

不允许数组中存在重复项。这 是因为当存在重复项时，不可能维护 集合项和DOM元素之间的一对一映射

如果确实需要重复项目，可以替换 使用

track by

表情

因此，如果您按如下方式更新代码，则一切正常：

<span ng-repeat="motto in mottos track by $index">
    {{motto}}
</span>

{{座右铭}

{{monit}}

重复2次，值为

One

&

Two

@ArunPJohny请尝试点击“添加更多”按钮几次。这不会提供问题的答案。要评论或要求作者澄清，请在他们的帖子下方留下评论——你可以随时在自己的帖子上发表评论，一旦你有足够的评论，你就可以发表评论了。我有点困惑为什么这不能回答这个问题。如果向对象添加唯一的id，则它可以完美地工作。下面是codepen中的一个示例：。更改如下：将原始字段命名为“name”，并添加一个id（unqiue标识符），绑定到name。

 <span ng-repeat="motto in mottos track by $index"> {{motto}} </span>

<span ng-repeat="motto in mottos track by $index"> {{motto}} </span>

<span ng-repeat="motto in mottos track by $index">
    {{motto}}
</span>