Spreadsheet made with AngularJS.

var app = angular.module('plunker', []);

app.controller('sheet', function($scope, $parse) {
    $scope.columns = ['A', 'B', 'C', 'D'];
    $scope.rows = [1, 2, 3, 4];
    $scope.cells = {};
    
    process = function(exp) {
      return exp.replace(/[A-Z]\d+/g, function(ref) {
        return 'compute("' + ref + '")';
      })
    }
    $scope.compute = function(cell) {
      return $parse(process($scope.cells[cell]))($scope);
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Spreadsheet made with AngularJS</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <h1>Spreadsheet made with AngularJS</h1>
    <p>Follows tutorial from http://thomasstreet.net/blog/spreadsheet.html</p>
    
    <div ng-controller="sheet">
      <table>
        <tr class="column-label">
          <td></td>
          <td ng-repeat="column in columns">{{column}}</td>
        </tr>
        <tr ng-repeat="row in rows">
          <td class="row-label">{{row}}</td>
          <td ng-repeat="column in columns">
            <div>
              <input ng-model="cells[column+row]"></input>
              <div ng-bind="compute(column+row)" class="output"></div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    
  </body>

</html>

/* Put your css in here */

  body { font-family: sans-serif; }
  .output, input { 
    font-size: 10pt;
    position: absolute;
    height: 1.2em;
    width: 50pt;
    height: 16pt;
    overflow: hidden;
    padding-left: 4pt;
  }
  input { border: none;}
  .output { 
    background: white; 
    pointer-events: none;
    padding-top: 2pt;
    height: 14pt;
  }
  input:focus + .output { display: none; }
 
  table { border-collapse: collapse; } 
  td > div {
    width: 55pt;
    height: 16pt;
  } 
  td { border: 1px solid #EEE; }
  .column-label  > td, .row-label {
    text-align: center;
    background: #EEE;
  }
  .row-label { width: 2em; }