javascript - 为什么这个 ng-repeat 不循环所有的值？

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 :

By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.

因此，如果您按如下方式更新代码，一切都会按预期工作:

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