Preciso criar uma Matriz Dinâmica onde o usuário insere o tamanho dela.
Essa Matriz precisar ser usando Div
e não Table
do HTML, e o conteúdo a ser mostrado dentro da Matriz é em imagens e precisa ser navegável utilizando tanto o o Mouse quanto as Teclas direcionais.
Abaixo o Código e o que eu consegui fazer no Plunker.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.matriz =[];
$scope.linha;
$scope.coluna;
$scope.getNumber = function(num) {
return new Array (Number(num));
}
});
HTML
<p>Linha</p>
<input type="text" ng-model="linha" placeholder="Digite o tamanho...">
<p>Coluna</p>
<input type="text" ng-model="coluna" placeholder="Digite o tamanho..." >
<p></p>
<table border="1" style="background-color:FFFFCC;border-collapse:collapse;border:1px solid FFCC00;color:000000;width:100%" cellpadding="3" cellspacing="3">
<tr data-ng-repeat="i in getNumber(linha)">
<td data-ng-repeat="i in getNumber(coluna)"> <input placeholder="Digite os dados..."> </td>
</tr>
</table>
Plunker do Projeto: http://embed.plnkr.co/75FnXMIsx4jBmBR7BCSn/
O que eu preciso é algo neste estilo: http://jsfiddle.net/BNrBX/
Mas implementando tambem a funcionalidade de escolher o tamanho da Matriz inserindo o valor das Linhas e Colunas