Book Your Seats

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<h2>
Book Your Seat
</h2>
<div class="row col-md-4 col-md-offset-3">
  <p>
    No of Quantity:
  </p>
  <select ng-model="selectedVal" ng-options="i for i in quantities"></select>
</div>
<div>
  <div>
    <div class="table-responsive">
      
        <tbody class="table">
          
            <span>{{rowLetter[$index]}}</span>
            <td ng-repeat="item in row">
              <a class="available" ng-disabled="isDisabled" ng-class="{'selected': item.check == true,'available': item.check == false, 'blocked': item.seat == true}" ng-click="clickSeat(item)">{{item.val}}</a>
            </td>
          </tr>
        </tbody>
      </table>
      {{rows | json}}
      <p>total Seats you can select = {{selectedVal}}</p>
      <p>whether the selection of seats should be disabled or not = {{isDisabled}}</p>
      <p>Seats selected: {{selectedSeatCount}}</p>
    </div>
  </div>
</div>

CSS

a {
  text-decoration: none;
  width: 21px;
  height: 21px;
  border-radius: 4px;
  padding: 6px;
  line-height: 21px;
  cursor: default;
}

a:hover,
a:focus {
  text-decoration: none;
  cursor: pointer;
}

a.selected {
  background: blue;
  color: white;
  border: 0;
}

a.available {
  color: blue;
  border: 1px solid blue;
  border-radius: 4px;
}

a.blocked {
  color: grey;
  border: 1px solid grey;
  border-radius: 4px;
}

a.available:hover {
  color: white;
  background: blue;
}

a.blocked,
a.blocked:hover {
  background: #eaeaea;
  color: #aaa;
  box-shadow: 0;
  cursor: default;
  border: 0;
}

JavaScript

var mooApp = angular.module('mooApp', []);

mooApp.controller('boo', ['$scope', 'rowCalc', function($scope, rowCalc) {
	$scope.quantities =[1,2,3];
  
  $scope.obj = [
    [{
      val: 1,
      letter: 'a',
      check: false,
      seat: false
    }, {
      val: 2,
      letter: 'a',
      check: false,
      seat: false
    }, {
      val: 3,
      letter: 'a',
      check: false,
      seat: false
    }],
    [{
      val: 1,
      letter: 'b',
      check: false,
      seat: false
    }, {
      val: 2,
      letter: 'b',
      check: false,
      seat: true
    }, {
      val: 3,
      letter: 'b',
      check: false,
      seat: false
    }]
  ];
  
  $scope.isDisabled = false;
  $scope.rows = $scope.obj;
  $scope.rowLetter = rowCalc.rowStack($scope.obj);
  $scope.selectedSeatCount = 0;
  
  $scope.clickSeat = function(seat) {
    if (!seat.seat && !$scope.isDisabled) {
      if (seat.check) {
        seat.check = false;
        $scope.selectedSeatCount--;
      } else if ($scope.selectedSeatCount < $scope.selectedVal) {
        seat.check = true;
        $scope.selectedSeatCount++;
      }
    }
  }
}])

.service('rowCalc', function() {
  var rowLetter = [];

  this.rowStack = function(obj) {
    for (var i = 0, j = 65; i < obj.length; i++, j++) {
      rowLetter.push(String.fromCharCode(j));
    }
    return rowLetter;
  }

});