Javascript 多维数组的嵌套ng重复
我正在尝试使用ng repeat指令在html中显示一个二维数组。我可以显示第一个维度(表行),但第二个维度(表数据)不起作用。我见过很多使用对象、JSON、键值数据结构的解决方案。。。但是我找不到只对包含其他数组的数组有效的东西。以下是一些失败的尝试。Javascript 多维数组的嵌套ng重复,javascript,arrays,angularjs,multidimensional-array,Javascript,Arrays,Angularjs,Multidimensional Array,我正在尝试使用ng repeat指令在html中显示一个二维数组。我可以显示第一个维度(表行),但第二个维度(表数据)不起作用。我见过很多使用对象、JSON、键值数据结构的解决方案。。。但是我找不到只对包含其他数组的数组有效的东西。以下是一些失败的尝试。 HTML:(不起作用) 工作示例: HTML: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" />
HTML:(不起作用) 工作示例: HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div>
<table>
<tr ng-repeat="y in grid">
<td ng-repeat="x in y track by $index">{{x}}</td>
</tr>
</table>
</div>
</body>
</html>
演示:
由于数组数据包含重复项,您希望为唯一id添加track by
,因此我添加了track by$index
更多信息
<div ng-app = "grid" ng-controller = "gridCtrl">
<table>
<tr ng-repeat = "y in grid">
<td ng-repeat = "x in grid[$index]"></td>
</tr>
</table>
</div>
var grid = angular.module("grid", []);
grid.controller("gridCtrl", function($scope)
{
$scope.grid = [[empty, empty, empty, empty, empty],
[empty, empty, empty, empty, empty],
[empty, empty, empty, empty, empty],
[empty, empty, empty, empty, empty],
[empty, empty, empty, empty, empty]];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div>
<table>
<tr ng-repeat="y in grid">
<td ng-repeat="x in y track by $index">{{x}}</td>
</tr>
</table>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.grid = [["empty", "empty", "empt", "empt", "empty"],
["empty", "empty", "empt", "empt", "empty"]];
});