Seat map

by dumptyd

HTML

<div ng-app="sApp" ng-controller="sctrl">
  <div class="seat" ng-repeat="s in seats" ng-style="{left: s.left, top: s.top}" title="{{s.name}}"></div>
</div>

CSS

.seat {
  position: absolute;
  height: 30px;
  width: 30px;
  box-sizing: border-box;
  border: 1px solid #000;
}

JavaScript

var app = angular.module('sApp', []);
app.controller('sctrl', function($scope) {
	$scope.seats = [];
  for(var i = 0; i < 100; ++i) {
  	$scope.seats.push({
    	name: 'Alice Doe',
      left: ((35 * i) - (35 * 10 *  Math.floor(i/10) )) + 'px',
      top: (35 * (Math.floor(i/10))) + 'px',
    });
  }
});