Javascript angularjs 2D数组ng repeat工作不正常_Javascript_Arrays_Angularjs

Javascript angularjs 2D数组ng repeat工作不正常

javascript arrays angularjs

Javascript angularjs 2D数组ng repeat工作不正常,javascript,arrays,angularjs,Javascript,Arrays,Angularjs,我在一个控制器中定义了一个2D数组，但当我尝试在它上面循环时，使用2个叠瓦循环，它不能像示例那样工作。第一个循环工作正常，但第二个循环不工作 js/index.js var gameOfLifeApp = angular.module('gameOfLifeApp', []); gameOfLifeApp.controller('fieldCtrl', function ($scope) { $scope.field = [ [0, 0, 0], [0

我在一个控制器中定义了一个2D数组，但当我尝试在它上面循环时，使用2个叠瓦循环，它不能像示例那样工作。第一个循环工作正常，但第二个循环不工作

js/index.js

var gameOfLifeApp = angular.module('gameOfLifeApp', []);

gameOfLifeApp.controller('fieldCtrl', function ($scope) {
    $scope.field = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
    ];
});

index.html

<!DOCTYPE HTML>
<html ng-app="gameOfLifeApp">
<head>

    <meta charset="UTF-8">
    <title>Game of Life</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="js/index.js"></script>

</head>
<body ng-controller="fieldCtrl">

<div id="field">
    <div class="column" ng-repeat="column in field">
        <div class="cell" ng-repeat="cell in column"></div>
    </div>
</div>

</body>
</html>


人生游戏

输出：

<body ng-controller="fieldCtrl" class="ng-scope">
<div id="field">
    <!-- ngRepeat: column in field -->
    <div class="column ng-scope" ng-repeat="column in field">
        <!-- ngRepeat: cell in column -->
    </div>
    <!-- end ngRepeat: column in field -->
    <div class="column ng-scope" ng-repeat="column in field">
        <!-- ngRepeat: cell in column -->
    </div>
    <!-- end ngRepeat: column in field -->
    <div class="column ng-scope" ng-repeat="column in field">
        <!-- ngRepeat: cell in column -->
    </div>
    <!-- end ngRepeat: column in field -->
</div>
</body>

我做错了什么？

好吧，这很有趣，数据集中的一行重复了相同的值，就像在数据集中一样：

$scope.field = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

或者类似地，以下数据集（为了澄清我的解释，即：“row”）

在angular中不允许，并将其打断，因此，如果右键单击->inspect element，您将得到一个关于重复项的错误。但是，如果您更改了数据集，“行”中的每个“列”都有自己的值，它将按预期工作，如下所示

$scope.field = [
    [1, 2, 3],
    [3, 1, 2],
    [3, 2, 1]
];

你可以在第一个答案中了解更多

//因此，参考该答案的相关摘录，您的问题的答案是：

AngularJS不允许ng repeat指令中存在重复项。这意味着如果您尝试执行以下操作，您将得到一个错误

//如果不允许在中继器中重复出现，下面的命令将抛出错误。中继器：[1,1,1]中的行键：编号：1

但是，稍微更改上面的代码以定义一个索引来确定唯一性，如下所示，将使其再次工作

//这样就行了

您还可以使用任何自定义跟踪属性来定义唯一性，而不仅仅是$index。因为在这个场景中，对象没有任何其他属性，所以这很好。发生此错误的原因是angular使用字典将项的id存储为键，值作为DOM引用。从代码（angular.js中的第15402行）来看，它们似乎在基于键缓存以前找到的DOM元素，以此作为性能优化。因为他们需要唯一的键，所以当他们在第15417行找到重复的键时，会显式抛出此错误。好吧，这很有趣，数据集中的一行重复了相同的值，就像在数据集中一样：

$scope.field = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
];

或者类似地，以下数据集（为了澄清我的解释，即：“row”）

$scope.field = [
    [1, 2, 3],
    [3, 1, 2],
    [3, 2, 1]
];

你可以在第一个答案中了解更多

//因此，参考该答案的相关摘录，您的问题的答案是：

AngularJS不允许ng repeat指令中存在重复项。这意味着如果您尝试执行以下操作，您将得到一个错误

//如果不允许在中继器中重复出现，下面的命令将抛出错误。中继器：[1,1,1]中的行键：编号：1

但是，稍微更改上面的代码以定义一个索引来确定唯一性，如下所示，将使其再次工作

//这样就行了

您还可以使用任何自定义跟踪属性来定义唯一性，而不仅仅是$index。因为在这个场景中，对象没有任何其他属性，所以这很好。发生此错误的原因是angular使用字典将项的id存储为键，值作为DOM引用。从代码（angular.js中的第15402行）来看，它们似乎在基于键缓存以前找到的DOM元素，以此作为性能优化。因为它们需要唯一的键，所以当它们在第15417行找到重复的键时，会显式抛出此错误。如果每个单元格的对象不相同，Angular将无法跟踪它们。要超越此限制，请使用track by
关键字并使用$index
进行跟踪

<div id="field">
    <div class="column" ng-repeat="column in field">
        <div class="cell" ng-repeat="cell in column track by $index"></div>
    </div>
</div>

您不能使用此选项。如果每个单元格的对象不相同，Angular将无法跟踪它们。要超越此限制，请使用track by
关键字并使用$index
进行跟踪

<div id="field">
    <div class="column" ng-repeat="column in field">
        <div class="cell" ng-repeat="cell in column track by $index"></div>
    </div>
</div>

这行吗？这行吗？是的，它是。我还注意到angularjs以自己的方式对字符串进行排序，一旦您有多个具有完全相同值的字符串，这些值就会被洗牌，并且不会以返回（从服务器）的相同方式检索。是的，它是。我还注意到angularjs以自己的方式对字符串进行排序，一旦有多个字符串具有完全相同的值，这些值就会被洗牌，并且不会以与返回（从服务器返回）相同的方式进行检索，这应该是可接受的答案。。谢谢你的解决方案这应该是公认的答案。。谢谢你的解决方案