避免在AngularJS中多次单击按钮

Question

我有一个按钮，单击后将保存表单信息。 问题是，用户无需单击“保存”按钮上的1，只要它在屏幕上消失，就可以多次单击它。 这样，我保存了相同的表格，该表格又引发了重复的异常。 请帮我。 提前致谢。

<button ng-click="myFunc()">Save</button>

在上面的代码中，myFunc（）由用户单击的次数触发。

Answer 1

使用$scope变量并ng-disabled以更新点击并检查变量，

<button  ng-click="myFunc()" ng-disabled="buttonClicked"></button>

控制者

$scope.buttonClicked = true;

Answer 2

我认为在首次单击后禁用该按钮将帮助您解决此问题。

Answer 3

如果您希望此功能与多个按钮相关：

JS：

$scope.disabled = {};
$scope.myFunc = function(identifier) {
    $scope.disabled[identifier] = 1;
    ...
}

HTML：

<button  ng-click="myFunc(identifier)" ng-disabled="disabled.identifier"></button>

如果您只想通过一个按钮使用此功能：

JS：

$scope.disabled = 0;
$scope.myFunc = function() {
    $scope.disabled = 1;
    ...
}

的HTML

<button  ng-click="myFunc()" ng-disabled="disabled"></button>

Answer 4

您可以在第一次单击后禁用提交按钮，以防止重复输入。 例如，您有类似HTML的内容，

 <div ng-app="mydemo" ng-controller="myController">
        <button type="submit" ng-disabled="isDisabled" ng-click="myFunc()"> Submit</button>
    </div>

angular.module('mydemo', [])
    .controller('myController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true; // To disable Button
    }

    });

这样您可以禁用按钮。 它一定会为您工作。 谢谢。

Answer 5

为此创建一个指令，以便可以重复使用

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

因此请使用click-and-disable="myFunc()"而不是ng-click

Answer 6

首次单击后隐藏表格可解决此问题。