angular/angular.js

<style>
[ng-cloak] { display: none; }
</style>
<div ng-app="largetableBenchmark" ng-cloak>
  <div ng-controller="DataController">
    <div class="container-fluid">
      <p>
      Large table rendered with AngularJS
      </p>

      <div><label><input type="radio" ng-model="benchmarkType" value="none">none: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="baselineBinding">baseline binding: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="baselineInterpolation">baseline interpolation: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngBind">ngBind: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngBindOnce">ngBindOnce: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="interpolation">interpolation: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="bindOnceInterpolation">interpolation + bind-once: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="interpolationAttr">attribute interpolation: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngBindFn">ngBind + fnInvocation: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="interpolationFn">interpolation + fnInvocation: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngBindFilter">ngBind + filter: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="interpolationFilter">interpolation + filter: </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngModelConstName">ngModel (const name): </label></div>
      <div><label><input type="radio" ng-model="benchmarkType" value="ngModelInterpName">ngModel (interp name): </label></div>

      <ng-switch on="benchmarkType">
        <baseline-binding-table ng-switch-when="baselineBinding">
        </baseline-binding-table>
        <baseline-interpolation-table ng-switch-when="baselineInterpolation">
        </baseline-interpolation-table>
        <div ng-switch-when="ngBind">
          <h2>baseline binding</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row">
              <span ng-bind="column.i"></span>:<span ng-bind="column.j"></span>|
            </span>
          </div>
        </div>
        <div ng-switch-when="ngBindOnce">
          <h2>baseline binding once</h2>
          <div ng-repeat="row in ::data">
            <span ng-repeat="column in ::row">
              <span ng-bind="::column.i"></span>:<span ng-bind="::column.j"></span>|
            </span>
          </div>
        </div>
        <div ng-switch-when="interpolation">
          <h2>baseline interpolation</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row">{{column.i}}:{{column.j}}|</span>
          </div>
        </div>
        <div ng-switch-when="bindOnceInterpolation">
          <h2>baseline one-time interpolation</h2>
          <div ng-repeat="row in ::data">
            <span ng-repeat="column in ::row">{{::column.i}}:{{::column.j}}|</span>
          </div>
        </div>
        <div ng-switch-when="interpolationAttr">
          <h2>attribute interpolation</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row" i="{{column.i}}" j="{{column.j}}">i,j attrs</span>
          </div>
        </div>
        <div ng-switch-when="ngBindFn">
          <h2>bindings with functions</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row"><span ng-bind="column.iFn()"></span>:<span ng-bind="column.jFn()"></span>|</span>
          </div>
        </div>
        <div ng-switch-when="interpolationFn">
          <h2>interpolation with functions</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row">{{column.iFn()}}:{{column.jFn()}}|</span>
          </div>
        </div>
        <div ng-switch-when="ngBindFilter">
          <h2>bindings with filter</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row"><span ng-bind="column.i | noop"></span>:<span ng-bind="column.j | noop"></span>|</span>
          </div>
        </div>
        <div ng-switch-when="interpolationFilter">
          <h2>interpolation with filter</h2>
          <div ng-repeat="row in data">
            <span ng-repeat="column in row">{{column.i | noop}}:{{column.j | noop}}|</span>
          </div>
        </div>
        <div ng-switch-when="ngModelConstName">
          <h2>ngModel (const name)</h2>
          <div ng-repeat="row in data">
            <input type="text" ng-model="row.i" name="constName" />
            <input type="text" ng-model="row.j" />
          </div>
        </div>
        <div ng-switch-when="ngModelInterpName">
          <h2>ngModel (interp name)</h2>
          <div ng-repeat="(rowIdx, row) in data">
            <input type="text" ng-model="row.i" name="input-{{rowIdx}}" />
            <input type="text" ng-model="row.j" name="input2-{{rowIdx}}" />
          </div>
        </div>
      </ng-switch>
    </div>
  </div>
</div>