Question

更多值被推入数组：

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

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

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

和

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

ng-repeat没有按预期显示所有元素：codepen，为什么？ ...

HTML

<ion-content>

    <button class="button button-positive" ng-click="addMotto('More')">
      <i class="icon ion-quote"> Click me to add more ...</i>
    </button>

    <div class="card item-text-wrap">
     <div class="item">
      {{mottos.length}}
      <span ng-repeat="motto in mottos"> {{motto}} </span>
     </div>
    </div>

</ion-content>

Answer 1

来自documentation：

默认情况下，ngRepeat不允许在数组中包含重复项。这个   是因为当有重复时，不可能维持一个   集合项和DOM元素之间的一对一映射。

如果您确实需要重复重复项目，可以替换   使用track by使用您自己的默认跟踪行为   表达

因此，如果您按如下方式更新代码，则事情按预期工作：

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

Answer 2

而不是这个

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

尝试这样的事情

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

您可以在this页面

上更详细地看到这一点

Answer 3

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

Answer 4

因为您需要使用$track by 他的解决方案实际上在这里描述：http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

http://codepen.io/anon/pen/doRKWY

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

为什么这个ng-repeat没有循环所有值？

4 个答案: