Question

我正在创建一款可以帮助您预订座位的应用。

This is the interface of my seat layout

我的问题是，当selectedVal达到零时，我无法禁用座位选择。

<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规则）

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

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

选择并取消选择相对于selectedVal的座位，即如果 selectedVal = 4然后用户总共只能选择4个席位。
如果SelectedVal小于1，则用户不应该除非用户取消选择任何一个，否则选择座位之前选择的座位并再次选择。
预订座位案例：如果座位的检查值为真，那么用户不应该选择或取消选择该座位（a.blocked 为此目的添加了CSS规则），因为它已被选中另一个用户（让我们假设）。

其他用户界面

集体自动座位选择

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

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

Answer 1

已禁用不是锚标记的有效属性。资料来源：http://dev.w3.org/html5/html-author/#the-a-element

（https://stackoverflow.com/a/18711335/4989081）

您可以改为使用按钮：

<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

3 个答案: