rittam rittam - 1 year ago 57
AngularJS Question

BookYourSeats: How to Disable the link once the counter reaches zero in AngularJs

I am in the middle of creating an app that helps you to book your seats.

This is the interface of my seat layout

My problem is that I cannot disable the selecting of seats once the selectedVal reaches zero.

<a class="available" ng-disabled="isDisabled" ng-class="{'selected': item.check == true,'available': item.check == false}" ng-click="execute($index,$parent.$index,item.val,item.letter)">{{item.val}}</a>

States of the Seats:

There are 3 States (CSS Rules)

  1. Available - In this the Users can select the seats(changing the seat color and backgroundColor on hover).

  2. Selected - In this the Seat backgroundColor: blue and the color: white.

  3. Blocked - In this the Seat backgroundColor: grey and the color: white and the user cursor changes from pointer to default.

What the User Can Do (User Cases)?

  1. Select and Deselect the Seats with respect to the selectedVal, i.e if the
    selectedVal = 4 then the user can select only 4 seats in total.

  2. if the SelectedVal is less than 1 then the user should not be able
    to select the seat anymore unless the user deselect any of the
    previously selected seats and select again.

  3. Booked Seats Case: If the check value of a seat is true, then the
    user should not be able to select or deselect that seat(a.blocked
    CSS rule is Added for that purpose) since it is already selected by
    another user(Lets assume).

Source: https://jsfiddle.net/rittamdebnath/5vqxgtq3/

Answer Source

You can add a logic like this in execute function:

$scope.execute = function(i, j, itemVal, itemLetter) {
  angular.forEach($scope.obj, function(v, k) {
    if (v[i].val == itemVal && v[i].letter == itemLetter) {

      if ($scope.isDisabled && v[i].check == false) 

      v[i].check = !v[i].check;
      if (v[i].check)
        $scope.selectedVal -= 1;
        $scope.selectedVal += 1;

      console.log(itemVal + " " + itemLetter);
      if ($scope.selectedVal < 1) {
        $scope.isDisabled = true;
      } else {
        $scope.isDisabled = false;

I've added this extra if condition:

if ($scope.isDisabled && v[i].check == false) 

I hope this will help you. Thanks.