我在 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/