且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在单击后禁用提交按钮以防止在 Angularjs 中多次提交?

更新时间:2022-12-17 20:02:33

您已经非常接近答案了.您唯一错过的是使用 ng-click 调用按钮上的 someFunc() 函数.

You were very close to the answer. The only thing you missed out was calling the someFunc() function on button using ng-click.

另一个问题是,在你的控制器中,函数应该是 $scope.someFunc() 而不是 var someFunc()

The other issue is, in your controller the function should be $scope.someFunc() and not var someFunc()

工作示例:你的 index.html 应该是这样的:

Working example: Your index.html should be like:

<html>

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="application.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
          <button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
  </body>

</html>

你的控制器 application.js 就像:

And your controller application.js be like:

angular.module('demo', [])
    .controller('demoController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true;
    }

    });