Angular - Grid

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="homeController as homeCtrl">
      <span>{{homeCtrl.hello}}</span>
      <table class="eGrid">
        <thead>
          <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
          </tr>
        </thead>
        <tbody>
        <tr ng-repeat="r in homeCtrl.data">
          <td>{{r.val1}}</td>
          <td>{{r.val2}}</td>
          <td>{{r.val3}}</td>
        </tr>
        </tbody>
      </table>
      
      <br><br><hr>
      Model:
      <table>
      <tr ng-repeat="r in homeCtrl.data">
        <td>{{r.val1}}</td>
        <td>{{r.val2}}</td>
        <td>{{r.val3}}</td>
      </tr>
      </table>
      <div class="eGridColumnTemplates">
        <input type="text" class="column0Template" style="position:absolute; display:none;" ng-model="homeCtrl.data[0]['val1']"/>
        <select class="column1Template" style="position:absolute; display:none;">
          <option>1</option>
          <option>2</option>
        </select>
        <input type="text" class="column2Template" style="position:absolute; display:none;" ng-model="homeCtrl.data[0]['val3']"/>
      </div>
      prop:{{homeCtrl.data[0]['val1']}}
      <br>
      row:{{row}}

  </div>
</div>

CSS

body{background-color:white;}

table.eGrid{
border-collapse:collapse;
border:1px solid #ccc;
}

table.eGrid th{
background-color: #eee;
border:1px solid #ccc;
padding:6px;
}

table.eGrid td{
border:1px solid #ccc;
}

table.eGrid td.current{
  border:2px solid #5292F7;
}

input{
  border:2px solid #5292F7;
}

JavaScript

/* Application */
var myApp = angular.module('myApp', []);

myApp.controller('homeController', function ($scope) {
	var vm = this;
  
  vm.hello = "Hi!";
  
  vm.data=[
  	{id:1, val1:"r1c1", val2:"r1c2", val3:"r1c3"},
    {id:2, val1:"r2c1", val2:"r2c2", val3:"r2c3"},
    {id:3, val1:"r3c1", val2:"r3c2", val3:"r3c3"},
    {id:4, val1:"r4c1", val2:"r4c2", val3:"r4c3"},
  ];
  
});

myApp.directive('eGrid', function ($document) {
		
    function hideInputTemplates(){
    					// TODO: replace
              var input = angular.element(document.getElementsByClassName('columnTemplate'));
              input.css('display','none');
    };
    
    function enableEdit(e){
    	var td = angular.element(e.target);
      var columnIndex = e.target.cellIndex;
      var rowIndex = e.target.parentElement.rowIndex;

      //scope.row=rowIndex-1;

      var input = angular.element(document.getElementsByClassName('column'+columnIndex+'Template'));
      var rect = td[0].getBoundingClientRect();
      input.css('top', rect.top - 1 + 'px');
      input.css('left', rect.left + 0 + 'px');
      input.css('width', rect.width - 4 + 'px');
      input.css('height', rect.height - 4 + 'px');
      input.css('display','block');
      input[0].focus();
    }

    return {
        restrict: 'AEC',
        //transclude: true,
        scope: {
        },
        link: function link(scope, element, attrs) {
        		var table = element;
            
            // INIT
            $document.on("keydown", function(e){
                var rows = table.find('tbody').find('tr').length;
                var columns = table.find('thead').find('th').length;
                var active = scope.active||0;
                //alert(columns + 'x' + rows);

							


                if (e.keyCode == 37) { //move left or wrap
                    active = (active>0)?active-1:active;
                    hideInputTemplates();
                }
                
                if (e.keyCode == 38) { // move up
  ...