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
}
}
changedCell(i, 0);
}
function changedCell(row, col) {
// call FRP tree
for(var j=col+1;j<scope.count;j++) {
var func = formula2func( scope.rows[row].cells[j].formula )
scope.rows[ row ].cells[ j ].value = func( scope )
}
}
function step(value) {
scope.rows[0].cells[0].value = value; // ng-change
changedCell(0, 0);
console.profile( 'digest' )
scope.$digest()
console.profileEnd( 'digest' )
};
setTimeout( function(){
step(3)
} , 4000 )
setTimeout( function(){
step(7)
} , 8000 )
}])