javascript - BookYourSeat : Automatic Seat Selection on Click using AngularJS [GIF]

Question

预订你的座位:

这是一个 angularJs 应用程序，可以帮助您为类似于 bookmyshow 的电影节目预订座位。

]

用户可以做什么(用户案例)？

1. 根据 selectedVal 选择和取消选择座位，即如果selectedVal = 4 那么用户总共只能选择4个座位。

2. 如果 SelectedVal 小于 1，则用户不应该能够除非用户取消选择任何座位，否则不再选择座位之前选择的座位，然后重新选择。

3. Booked Seats 案例:如果一个座位的校验值为真，那么用户不应该能够选择或取消选择那个座位(a.blocked为此目的添加了 CSS 规则)因为它已经被选择另一个用户(假设)。

自动选座案例

As shown in the GIF

1. 如果用户选择 3 个座位并点击第一行的第一个座位，它应该会自动选择同一行的 2 和 3。

1. 如果用户选择 3 个座位并点击该行中的倒数第二个座位，则最后两个座位应被填满，其余座位应在用户点击的位置填满。

1. 如果用户选择 3 个座位并仅点击最后一个座位，则应仅填充该座位。

如果是4个座位。

问题:

我能够使用 angular.forEach() 实现自动选择过程，但无法正确实现所有逻辑。

$scope.execute = function(i, j, itemVal, itemLetter) {
        angular.forEach($scope.obj, function(v, k) {
          if (v[i].val == itemVal && v[i].letter == itemLetter) {
            if (v[i].seat == true || ($scope.isDisabled && v[i].check == false)) {
              return;
            }
            v[i].check = !v[i].check;
            if (v[i].check)
              $scope.selectedVal -= 1;
            else
              $scope.selectedVal += 1;

           //seatSelection
            var m = i;
            for (var l = 0; l < $scope.selectedVal; l++)
              v[m++].check = true;
                //seatSelectionEnd

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

工作 fiddle :https://jsfiddle.net/rittamdebnath/5vqxgtq3/11/

Answer 1

您的循环逻辑有点难以理解，但更重要的是，没有必要。与其使用循环遍历整个集合的点击函数，不如让它直接与绑定(bind)到被点击元素的对象交互。

将您的 anchor 元素绑定(bind)更改为此:ng-click="clickSeat(item)"，并在 Controller 上使用如下函数:

$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++;
      }
    }
}

这是一个更新的 fiddle :https://jsfiddle.net/5vqxgtq3/12/

我不知道这是否捕获了您正在寻找的所有功能，但希望能有效地演示当不再依赖循环时逻辑如何更容易推理，并且您可以从那里扩展它。