BookYourSeats：如何在 AngularJs 中计数器达到零后禁用 link

Question

我正在开发一款可以帮助您预订座位的应用程序。

我的问题是，一旦 selectedVal 达到零，我就无法禁用席位 selecting。

<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>

席位状态：

有 3 个州（CSS 规则）

可用 - 在此用户可以 select 座位（悬停时更改座位颜色和背景颜色）。
Selected - 在此座椅背景颜色：蓝色和颜色：白色。
已阻止 - 在此座椅背景颜色：灰色和颜色：白色，用户光标从指针变为默认值。

用户可以做什么（用户案例）？

Select 和 Deselect 相对于 selectedVal 的席位，即如果 selectedVal = 4 那么用户总共只能select4个席位。
如果 SelectedVal 小于 1 那么用户不应该能够到 select 座位了，除非用户 deselect 任何之前 select 座位和 select 再次。
Booked Seats 案例：如果某个座位的校验值为真，则用户不应该 select 或 deselect 那个座位（a.blocked CSS 规则是为此添加的）因为它已经被 select 编辑了另一个用户（假设）。

其他 UI 个案例

集体自动座椅Selection

一旦转到此 link：in.bookmyshow.com/buytickets/me-before-you-national-capital-region-ncr/movie-ncr-ET00035678-MT/20160612#!seatlayout。并尝试预订一些座位，您会注意到，如果总座位数 = 3，那么在 seatLayout 页面上，当用户单击一个座位时，接下来的两个座位也会自动 selected。 Ref Img: BookMyShow SeatLayout and selection process

代码来源：https://jsfiddle.net/rittamdebnath/5vqxgtq3/

Answer 1

Disabled is not a valid attribute for the anchor tag. Source : http://dev.w3.org/html5/html-author/#the-a-element

()

您可以改用按钮：

<button 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}}</button>

见https://jsfiddle.net/odsyea33/

可以使用 CSS 标记所选座位。

Answer 2

您可以将 ng-disabled 与 <a> 一起使用。没用。

在这种情况下，您可以在 ng-click 中使用惰性计算作为解决方法：

ng-click="(isDisabled && item.check != true) || execute($index,$parent.$index,item.val,item.letter)"

这里是 working fiddle.

Answer 3

您可以在执行函数中添加这样的逻辑：

$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) 
        return;

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

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

我添加了这个额外的 if 条件：

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

希望对您有所帮助。谢谢

BookYourSeats：如何在 AngularJs 中计数器达到零后禁用 link

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

javascript

frontend

frameworks

angularjs