Strange array behaviour with Angular

Question

I have a two dimensional array in controller:

var MainController = function($scope) {
    $scope.board = [[1, 2, 3, 4],
                    [5, 6, 7, 8],
                    [9, 10, 11, 12],
                    [13, 14, 15, 16]];
};

And I want to display it as table:

<table>
    <tr ng-repeat="line in board">
        <td ng-repeat="cell in line">
            {{ cell }}
        </td>
    </tr>
</table>

All work fine with this code, but if I change the data in the board to make two identical cells in the line (inner array) - this line disappear. So if I change controller to:

    $scope.board = [[1, 2, 3, 4],
                    [5, 6, 7, 7],
                    [9, 10, 11, 12],
                    [13, 14, 15, 16]];

the second line disappear.

Why and how can I fix it?

could you post a plunkr or a fiddle version of the code so we can play around with it? — thataustin
– thataustin, Commented Nov 21, 2014 at 20:36

kubuntu · Accepted Answer · 2014-11-21 20:44:11Z

2

It sees the identical values as duplicates. Modify your view by adding track by syntax as follows

<table>
    <tr ng-repeat="line in board track by $index">
        <td ng-repeat="cell in line track by $index">
            {{ cell }}
        </td>
    </tr>
</table>

This

will cause the items to be keyed by their position in the array instead of their value

See Duplicate Key in Repeater

edited Nov 21, 2014 at 20:44

answered Nov 21, 2014 at 20:38

kubuntu

2,5351 gold badge24 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dinesh Over a year ago

Seems like a bug in angular being institutionalized. It is not a duplicate key - keys are the array indices.

Blazemonger Over a year ago

Not a bug; this is exactly what track by is intended to solve.

Collectives™ on Stack Overflow

Strange array behaviour with Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related