JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<table ng-controller="excel">
<tr ng-repeat="row in rows">
<td ng-repeat="cell in row.cells">{{cell.value}}</td>
</tr>
</table>
JavaScript
angular.module( 'excel', [] )
.controller( 'excel' , [ '$scope' , function( scope ) {
var funcs = {}
function formula2func( formula ) {
var func = funcs[ formula ]
if( func ) return func
if( /^=/.test( formula ) ) {
var func = Function( 'scope' , 'return ' + formula.substring( 1 ) )
} else {
var func = function( formula ){
return function(){ return formula }
}( formula )
}
return funcs[ formula ] = func
}
scope.count = 50
scope.rows = []
for( var i = 0; i < scope.count; ++i ) {
scope.rows[ i ] = { cells : [] }
for( var j = 0; j < scope.count; ++j ) {
scope.rows[ i ].cells[ j ] = {
value : '',
formula : j
? '=Number(scope.rows['+i+'].cells['+((j-1)%8)+'].value)+1'
: i
}
}
}
scope.$watch( function() {
return scope.rows
} , function( next , prev ) {
var i = scope.count; while( i-- ) {
var j = scope.count; while( j-- ) {
var func = formula2func( scope.rows[i].cells[j].formula )
scope.rows[ i ].cells[ j ].value = func( scope )
}
}
} , true )
setTimeout( function(){
console.profile( 'digest' )
scope.rows[0].cells[0].formula = '1'
scope.$digest()
console.profileEnd( 'digest' )
} , 1000 )
}])