szilardhuber/angular.html

## angular.html
<!doctype html>
<html ng-app="optimizationTest">
<head>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="angular.js"></script>
</head>
<body ng-controller='TableCtrl'>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Data</h3>
        <input class="btn btn-default" type="button" value="Load" ng-click="load()">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th ng-repeat="_field in dataHeader"
                ng-click="selectField(_field)"
                ng-class="{info: field === _field}"
              >
                {{ _field }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows">
              <td ng-repeat="(index, _field) in row track by $index"
                ng-init="fieldName = dataHeader[index]"
                ng-click="selectField(fieldName)"
                ng-class="{'null-value': _field === 'null', info: field === fieldName}"
              >
                  {{ _field }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

## angular.js
var optimizationTest = angular.module('optimizationTest', []);
optimizationTest.controller('TableCtrl', function ($scope, $http) {
  // We highlight data columns when they are selected
  $scope.selectField = function (field) {
    $scope.field = field;
  };

  // Loading data only on button action as this eliminates initial loading
  // off assests from our benchmarks.
  $scope.load = function () {
    $scope.rows = [];
    var firstRow, columnIndex, data;
    data = {
      id: 1,
      provider: 'sap',
      table: 'BSEG',
      count: 20
    }
    $scope.dataHeader = [];
    $http.post("http://localhost:3333/api/data_provider/data", data)
    .success(function (response) {
      // In our API metaData comes on a different protocol but I
      // did not want to increase complexity here so these names will do
      firstRow = response.data[0];
      if (firstRow != null) {
        for (columnIndex = 0; columnIndex < firstRow.length; columnIndex++) {
          $scope.dataHeader.push("column-"+columnIndex);
        }
      }

      // Set the real data
      $scope.rows = response.data;
    })
    .error(function (response, status) {
      console.log("Error");
    });
  }
});
	<!doctype html>
	<html ng-app="optimizationTest">
	<head>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
	<script src="bower_components/angular/angular.js"></script>
	<script src="angular.js"></script>
	</head>
	<body ng-controller='TableCtrl'>
	<div class="container">
	<div class="row">
	<div class="col-md-6">
	<h3>Data</h3>
	<input class="btn btn-default" type="button" value="Load" ng-click="load()">
	<table class="table table-bordered">
	<thead>
	<tr>
	<th ng-repeat="_field in dataHeader"
	ng-click="selectField(_field)"
	ng-class="{info: field === _field}"
	>
	{{ _field }}
	</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in rows">
	<td ng-repeat="(index, _field) in row track by $index"
	ng-init="fieldName = dataHeader[index]"
	ng-click="selectField(fieldName)"
	ng-class="{'null-value': _field === 'null', info: field === fieldName}"
	>
	{{ _field }}
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</body>
	</html>
	var optimizationTest = angular.module('optimizationTest', []);
	optimizationTest.controller('TableCtrl', function ($scope, $http) {
	// We highlight data columns when they are selected
	$scope.selectField = function (field) {
	$scope.field = field;
	};

	// Loading data only on button action as this eliminates initial loading
	// off assests from our benchmarks.
	$scope.load = function () {
	$scope.rows = [];
	var firstRow, columnIndex, data;
	data = {
	id: 1,
	provider: 'sap',
	table: 'BSEG',
	count: 20
	}
	$scope.dataHeader = [];
	$http.post("http://localhost:3333/api/data_provider/data", data)
	.success(function (response) {
	// In our API metaData comes on a different protocol but I
	// did not want to increase complexity here so these names will do
	firstRow = response.data[0];
	if (firstRow != null) {
	for (columnIndex = 0; columnIndex < firstRow.length; columnIndex++) {
	$scope.dataHeader.push("column-"+columnIndex);
	}
	}

	// Set the real data
	$scope.rows = response.data;
	})
	.error(function (response, status) {
	console.log("Error");
	});
	}
	});