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));
}
});
$(World).keydown(function($scope){
if ($scope.linha.keyCode == 37) {
alert( "left pressed " );
return false;
}
if ($scope.keyCode == 38) {
alert( "up pressed " );
return false;
}
if ($scope.keyCode == 39) {
alert( "right pressed " );
return false;
}
if ($scope.keyCode == 40) {
alert( "down pressed " );
return false;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
<script type="text/javascript">
function myTest(e,oben,links,unten,rechts)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
// Key links.
selectArrowKey = links;
break;
case 38:
// Key oben.
selectArrowKey = oben;
break;
case 39:
// Key rechts.
selectArrowKey = rechts;
break;
case 40:
// Key unten.
selectArrowKey = unten;
break;
}
if (!selectArrowKey) return;
var controls = document.getElementsByName(selectArrowKey);
if (!controls) return;
if (controls.length != 1) return;
controls[0].focus();
}
</script>
</head>
<body ng-controller="MainCtrl">
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.19/angular-0.9.19.js"></script>
<ul>
<li><a href ng:click="selected=1">aba 1</a></li>
<li><a href ng:click="selected=2">aba 2</a></li>
<li><a href ng:click="selected=3">aba 3</a></li>
</ul>
<div ng:show="selected == 1">
<title>Teste Matriz</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href = "css/style.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<style>
.content{
margin: 30px;
}
.botao01{
background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
border: 1px solid #CCCCCE;
border-radius: 3px;
box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
0 2px 7px rgba(0, 0, 0, 0.2);
color: #616165;
display: block;
font-family: "Trebuchet MS";
font-size: 14px;
font-weight: bold;
line-height: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-shadow:1px 1px 0 #FFF;
padding: 5px 15px;
position: relative;
width: 80px;
}
.botao01:before{
border: 1px solid #FFF;
border-radius: 3px;
box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
inset 0 3px 2px -1px rgba(255, 255, 255, 1);
content: "";
bottom: 0;
left: 0;
right: 0;
top: 0;
padding: 5px;
position: absolute;
}
.botao01:after{
background: rgba(255, 255, 255, .4);
border-radius: 2px;
content: "";
bottom: 15px;
left: 0px;
right: 0px;
top: 0px;
position: absolute;
}
.botao01:active{
box-shadow: inset 0 0 7px rgba(0, 0, 0, .2);
top: 4px;
}
.botao01:active:before{
border: none;
box-shadow:none;
}
</style>
<input type="text" ng-model="nome">
<p>Insira seu dado: {{ nome }}</p>
<div class="content">
<a href="#" class="botao01">Botao</a>
</div>
<p align="center">Tarefa de Front-End</p>
<p align="center">-Angular</p>
<p align="center">-Javascript</p>
<p align="center">-CSS</p>
<p align="center">-HTML</p>
<p align="center">-Bootstrap</p>
<p align="center">-Less</p>
<p align="center">-JAD</p>
<p align="center">-NodeJS</p>
<p align="center">Tela com 2 Campos e mostrar uma Matriz Dinamica que se possa movimentar com as Teclas e o Mouse</p>
</div>
<div ng:show="selected == 2">
<h1>Matriz Dinâmica</h1>
<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 ng-repeat="i in getNumber(linha)">
<td ng-repeat="i in getNumber(coluna)"> <input placeholder="Digite os dados..."> </td>
</tr>
</table>
</div>
<div ng:show="selected == 3">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><input name="obenLinks" type="text" onkeydown="myTest(event,undefined,undefined,'mitteLinks','obenMitte')"></td>
<td><input name="obenMitte" type="text" onkeydown="myTest(event,undefined,'obenLinks','mitteMitte','obenRechts')"></td>
<td><input name="obenRechts" type="text" onkeydown="myTest(event,undefined,'obenMitte','mitteRechts',undefined)"></td>
</tr>
<tr>
<td><input name="mitteLinks" type="text" onkeydown="myTest(event,'obenLinks',undefined,'untenLinks','mitteMitte')"></td>
<td><input name="mitteMitte" type="text" onkeydown="myTest(event,'obenMitte','mitteLinks','untenMitte','mitteRechts')"></td>
<td><input name="mitteRechts" type="text" onkeydown="myTest(event,'obenRechts','mitteMitte','untenRechts',undefined)"></td>
</tr>
<tr>
<td><input name="untenLinks" type="text" onkeydown="myTest(event,'mitteLinks',undefined,undefined,'untenMitte')"></td>
<td><input name="untenMitte" type="text" onkeydown="myTest(event,'mitteMitte','untenLinks',undefined,'untenRechts')"></td>
<td><input name="untenRechts" type="text" onkeydown="myTest(event,'mitteRechts','untenMitte',undefined,undefined)"></td>
</tr>
</table>
<p>Angular serve para o Front-End comunicar-se com o Back-End atraves de JSON com Get e Post javascript que usa AJax</p>
<p>Angular tem estrutura MVC pra nao precisar de requisiçoes</p>
<p>import angular</p>
<p>definir app.js // info de modulo usar sistema em versoes modulares ex financeiro, rh etc no nosso ex é modulo registrado</p>
<p>import html</p>
<p>import controller js/faz controle de info no javascript /angular usa ng vc esta dentro da diretriz angular usando dentro de div, input, tabela, body, dai tem ng model view, hide, show, ng controller e apontar pra matrizcontroller</p>
</div>
</body>
</html>
/* Put your css in here */