Question

我有一个按钮，点击它将保存表单信息。问题是，用户而不是点击＆＃34;保存＆＃34;只要它在屏幕上消失，按钮就会多次点击它。有了这个，我正在保存相同的形式，其中抛出重复的异常。请帮我。提前谢谢。

<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

首次点击后隐藏表单解决了这个问题。

避免在AngularJS中多次单击按钮

6 个答案: