CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Shane
Shane

Reputation: 16827

AngularJS Nested ng-repeat Not Working in Version 1.2.1

I am working on a system where I would like to nest two ng-repeat statements so that I can work my way through a 2D array. I was able to complete the task successfully using version 1.1.1 as you can see here:

http://jsfiddle.net/skArT/1/

However, when I take the exact same code set and change the version of Angular to 1.2.1 the code no longer works and throws an error:

http://jsfiddle.net/skArT/2/

Error:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: x in value, Duplicate key: number:0

So my question is, how can I accomplish the task shown in version 1.1.1 with newer versions of Angular?

Upvotes: 3

Views: 1415

Answers (2)

km6zla
km6zla

Reputation: 4877

Adding a track by clause solves this. It seems rather trivial to me for it to be required in your case.

<body ng-app="myApp" ng-controller="myCtrl">
    <span ng-repeat="(index, value) in field">        
        <div ng-repeat="(key,x) in value track by key">{{x}}</div>
        <br/>
    </span>
</body>

http://jsfiddle.net/92bSt/

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245429

All you need to do is read the error message and listen to it. Change:

<div ng-repeat="x in value">{{x}}</div>

To:

<div ng-repeat="x in value track by $index">{{x}}</div>

Upvotes: 7

Related Questions