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 */