Angular的奇怪数组行为

Strange array behaviour with Angular

本文关键字：数组 Angular      更新时间：2023-09-26

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

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]];

第二行消失。

为什么以及如何修复它？

它将相同的值视为重复项。通过添加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>

这

将导致项目按其在数组中的位置进行键控 而不是它们的价值

请参阅转发器中的重复键

相关文章：