javascript - angularjs 二维数组 ng-repeat 无法正常工作

标签 javascript arrays angularjs

我在 Controller 中定义了一个二维数组,但是当我尝试在它上面循环时,有 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>

我做错了什么?

最佳答案

你不能使用这个。如果每个单元格不是对象相同的,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>

关于javascript - angularjs 二维数组 ng-repeat 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21901407/

相关文章:

javascript - 即使我在 POST 上收到 200 响应,$_POST 数据还是空的?

javascript - 是否可以将 FullCalendar 日历事件的背景设置为透明?

JavaScript TypedArray 混合类型

java - 从 PC 发送到 PC 以及从 PC 发送到 Android 时读取的字节数组不一致

c++ - 如何从运算符函数返回动态对象?

javascript - $编译:ctreq error in angular code

javascript - 扩展 react.component 和 '&' 符号

javascript - javascript中按位运算符的性能

javascript - 无法清空待办事项列表中的数组

javascript - Angular 无法通过 Promise 从 FS.readFile 获取数据