ng-repeat, for-loop và đẩy

Question

Tôi bị điên. Ví dụ hello-worldesque này có vấn đề gì vậy? Tôi đang cố gắng chỉ để kiểm tra một số điều cơ bản với 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 đặt, vòng lặp làm việc với 1 lần lặp lại, nhưng không phải với ví dụ 2. Không có gì được in. Đưa cái gì?

Answer 1

Bạn có các bản sao trong mảng mà bạn quay trở lại. Thêm track by $index sẽ giải quyết vấn đề của bạn.

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

---

Fiddle - http://jsfiddle.net/ayay0d6u/

Answer 2

Nếu bạn có một cái nhìn tại các thông báo lỗi, bạn sẽ nhận được câu trả lời.

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

Đó là bởi vì bản sao trong một bộ lặp không được phép. Sử dụng biểu thức 'theo dõi' để giải quyết vấn đề này.

Trong ví dụ của bạn, test2 trả về [1,2,2,3] có phần tử trùng lặp.

Ví dụ trên có thể được giải quyết bằng cách sử dụng bản nhạc theo chỉ mục $.

Bạn có thể tham khảo tài liệu hướng dẫn góc js: https://docs.angularjs.org/error/ngRepeat/dupes