Currently Chrome loads the table of size 40x15 in about 6 seconds. It's much slower than goog.editor.Table. I need to cut the load time at least twice.
<script type="text/ng-template" id="grid_item_renderer.html">
<span ng-switch on="cell.type">
<textarea ng-switch-when="simple" class="cell-text-area simple-cell" ng-model="cell.data">{{cell.data}}</textarea>
<span ng-switch-when="grid">
<table class="declarative-grid-table" border="1" bordercolor="#CCC" cellspacing="0" tabindex="0">
<tr ng-repeat="row in cell.data.grid" >
<td ng-repeat="cell in row" class="declarative-grid-cell">
<span ng-include="'grid_item_renderer.html'"></span>
</td>
</tr>
</table>
</span>
<span ng-switch-default>unexpected cell type</span>
</span>
</script>
<table class="declarative-grid-table" border="1" bordercolor="#CCC" cellspacing="0" tabindex="0">
<tr ng-repeat="row in declarativeGrid" class="declarative-grid-row">
<td ng-repeat="cell in row" class="declarative-grid-cell">
<span ng-include="'grid_item_renderer.html'"></span>
</td>
</tr>
</table>
With Angular you're able to optimize however much you might need to by creating custom directives. If you're experiencing performance issues with nested ng-repeats, it might be time to roll your own directive that builds the DOM elements of your table programmatically. It would be a lot faster and a lot less overhead, because there would be fewer $watches and scopes created by your custom directive.