<!DOCTYPE html>
<html ng-app="MatrixApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MatrixCtrl">
<table>
<tr ng-repeat="col in data">
<td ng-repeat="cell in col track by $index">
<table>
<tr ng-repeat="deepCol in cell">
<td ng-repeat="deepCell in deepCol track by $index">
<input type="text" style="width: 20px;" ng-model="deepCell.value">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
// Code goes here
angular.module('MatrixApp', [])
.controller('MatrixCtrl', ['$scope',
function($scope) {
function getMatrix(rows, cols, defaultValue){
var arr = new Array(rows);
for (var i = 0; i < rows; i++) {
arr[i] = new Array(cols);
for (var j = 0; j < cols ; j++) {
if(defaultValue !== null){
arr[i][j] = defaultValue;
}
else{
arr[i][j] = {"value":i+"-"+j};
}
};
};
return arr;
}
$scope.data = getMatrix(3,3,getMatrix(2,3,null));
}
]);
/* Styles go here */