ng-repeat，for-loop和push

Question

我越來越瘋狂了。這個hello-worldesque的例子有什麼不對？我只是想用angularjs 1.5.5來測試一些基本的東西。

HTML：

<div ng-app="myApp" ng-controller="Ctrl"> 
    <h3>test 1:</h3> 
    <span ng-repeat="label in test(1)">{{label}}</span> 
    <h3>test 2:</h3> 
    <span ng-repeat="label in test(2)">{{label}}</span> 
</div> 

JS：

angular.module('myApp', []) 
    .controller('Ctrl', ['$scope', function ($scope) { 
    $scope.test = function(amount) { 
     var result = []; 
     result.push("1"); 
     for (var i = 0; i < amount; i++) { 
     result.push("2"); 
     } 
     result.push("3"); 
     return result; 
    }  
}]); 

的jsfiddle：http://jsfiddle.net/d3v6vq7w/7/

的simpy放，循環工作1次迭代，但不與例如2.沒有被打印出來。是什麼賦予了？

Answer 1

您在返回的數組中有重複項。添加track by $index將解決您的問題。

<span ng-repeat="label in test(2) track by $index">{{label}}</span> 

---

小提琴 - http://jsfiddle.net/ayay0d6u/

Answer 2

如果你看一下錯誤信息，你會得到答案。

Error: ngRepeat:dupes Duplicate Key in Repeater Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: label in test(2), Duplicate key: string:2, Duplicate value: 2

From error page

Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

Answer 3

這是因爲在中繼器重複是不允許的。使用'track by'表達式來解決此問題。

在你的例子中，test2返回具有重複元素的[1,2,2,3]。

上面的例子可以通過使用track by $ index來解決。

可以參考角JS文件：https://docs.angularjs.org/error/ngRepeat/dupes