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

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 应用中单击时禁用按钮

Disable buttons when clicked in AngularJS app

angularjs

angularjs-directive