Question

我在控制器中有一个二维数组：

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

我希望将其显示为表格：

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

所有这些代码都可以正常工作，但是如果我更改电路板中的数据以在行中生成两个相同的单元格（内部数组） - 此行将消失。所以，如果我将控制器更改为：

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

第二行消失。

为什么以及如何解决？

Answer 1

它将相同的值视为重复值。通过添加track by语法修改您的视图，如下所示

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

此

将导致项目在数组中的位置被键入而不是他们的价值

请参阅Duplicate Key in Repeater

Angular的奇怪数组行为

1 个答案: