Another answers:
-
Original question:
How to create two dimensional array as table with ng-repeat?
this.boardArr = [
[1,6,3],
[5,2,7],
[9,10,11],
]
This doesn't work:
<table class="game-board" ng-controller="GameBoardController as gameBoard">
<tr ng-repeat="row in boardArr">
<td ng-repeat="col in row">{{boardArr[row][col]}}</td>
</tr>
</table>
E.g. by using nested ng-repeat directives like this
var app = angular.module('app', []);
app.controller('myController', function ($scope) {
$scope.myArr = [
[1,6,3],
[5,2,7],
[9,10,11],
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="myController">
<table>
<tr>
<th>optional heading 1</th>
<th>optional heading 2</th>
<th>optional heading 3</th>
</tr>
<tr ng-repeat="subArr in myArr">
<td ng-repeat="val in subArr">{{ val }}</td>
</tr>
</table>
</div>
</body>You have to create a table in your view like this:
<table class="game-board" ng-controller="GameBoardController as gameBoard">
<tr ng-repeat="row in boardArr">
<td ng-repeat="col in row">{{ col }}</td>
</tr>
</table>
So ng-repeat will iterate over boardArr and then you can display the values in different cells like I did above. You don't have to access the value you want to display like this: boardArr[row][col] because colalready contains the value of boardArr[row][col].
You'd have to loop over the rows and then their columns like this:
<table>
<tr ng-repeat="row in $ctrl.boardArr">
<td ng-repeat="col in row>{{col}}</td>
</tr>
</table>
