Question

我在AngularJS应用程序的页面中有几个按钮。单击一个按钮时，将填充一个数组，我需要禁用该按钮。我可以填充数组并在每次单击按钮时在页面中显示它但不确定如何禁用单击的按钮（可能是编写指令，不确定）。任何建议将不胜感激！

这是我的代码：

页：

<div>
  <button ng-click="click(1)">1</button>
  <button ng-click="click(2)">2</button>
  <button ng-click="click(3)">3</button>
  <button ng-click="click(4)">4</button>
  <button ng-click="click(5)">5</button>
</div>
<label>Selected Seats</label>
<div class="row">
  <ul ng-repeat="r in reserved">
      {{r}}
  </ul>
</div>

控制器：

$scope.reserved =[];
$scope.click = function(value){
  $scope.reserved.push(value);
};

Answer 1

您可以编写辅助函数：

$scope.isReserved = function(value) {
    return $scope.reserved.indexOf(value) > -1;
};

并像这样使用它：

<button ng-click="click(1)" ng-disabled="isReserved(1)">1</button>
<button ng-click="click(2)" ng-disabled="isReserved(2)">2</button>
<button ng-click="click(3)" ng-disabled="isReserved(3)">3</button>
<button ng-click="click(4)" ng-disabled="isReserved(4)">4</button>
<button ng-click="click(5)" ng-disabled="isReserved(5)">5</button>

演示： http://plnkr.co/edit/OeWnZTWHSK2DUhyOPbK0?p=preview

在AngularJS应用程序中单击时禁用按钮

1 个答案: