ng-repeat fails due to duplicates

Question

I'm trying to ng-repeat something a defined number of times:

Here's the (reduced) HTML:

<div class="row" ng-repeat="r in getNumber(size) track by $rowIndex">
    <span class="slot" data-y-coord="{{$rowIndex}}"></span>
</div>

And here's the JS:

$scope.size = 48;
$scope.getNumber = (number) => {
      var arr = [];
      for(var i=0; i<number; i++) {
        arr.push(i);
      }
      return arr;
};

I get the error

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: r in getNumber(size) track by $rowIndex, Duplicate key: undefined, Duplicate value: 1

which I think is weird because I am using 'track by'.

$rowIndex is undefined. Change $rowIndex to $index – matthijsb Oct 07 '16 at 10:42 — matthijsb, Oct 07 '16 at 10:42

byteC0de · Accepted Answer · 2016-10-07T11:45:03.843

4

try this,change $rowIndex to $index

<div class="row" ng-repeat="r in getNumber(size) track by $index">
    <span class="slot" data-y-coord="{{$index}}"></span>
</div>

AngularJS does not allow duplicates in a ng-repeat directive. link

edited Oct 07 '16 at 11:45

answered Oct 07 '16 at 10:39

byteC0de

5,153
5
33
66

1

You should highlight the changes, i.e. you changed $rowIndex to $index. – nagyf Oct 07 '16 at 11:40
@nagyf tks for your valuable feedback – byteC0de Oct 07 '16 at 11:45

ng-repeat fails due to duplicates

1 Answers1