Как отключить кнопку отправки после одного щелчка, чтобы предотвратить несколько представлений в Angularjs?

Я просмотрел по сети, включая несколько примеров для решения вопроса. Чтобы быть конкретным, я пробовал это:

HTML

<button OnClientClick="disableButton()" type="submit">Submit</button>

var disableButton = function (){ document.getElementById('<%= btnSubmit.ClientID %>').disabled = true; }

И это:

HTML

<button ng-disabled="isDisabled" type="submit">Submit</button>

    $scope.isDisabled = false;
var someFunc = function(){
$scope.isDisabled = true;}

Ни работали, ни рекламировались. Любые другие предложения? Пожалуйста, Angular только предложения. Спасибо.

Ответы

Ответ 1

Вы были очень близки к ответу. Единственное, что вы пропустили, это вызвать функцию someFunc() на кнопке, используя ng-click.

Другая проблема заключается в том, что в вашем контроллере функция должна быть $scope.someFunc(), а не var someFunc()

Рабочий пример: Ваш index.html должен выглядеть следующим образом:

<html>

  <head>
    <script data-require="[email protected]" 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 будет выглядеть следующим образом:

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

    $scope.isDisabled = false;

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

    });

Ответ 2

Другой способ - написать директиву, которая отключает кнопку отправки

    angular.module('myApp').directive('clickedDisable', function(){
    return {
        restrict: 'A',
        link: function(scope, ele, attrs){
            $(ele).click(function(){
                $(ele).attr('disabled', true);
            });
        }
    };

И в HTML

    <button type="submit" clicked-disable></button>

Ответ 3

Попробуйте использовать это:

<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>

Также существуют различные подходы к достижению этой функциональности, вы можете пройти через следующие ссылки, они наверняка помогут.

fooobar.com/questions/55992/...

fooobar.com/questions/202925/...

fooobar.com/questions/202926/...

Ответ 4

Мне не понравился ни один из предоставленных ответов, поскольку все они загромождают глобальную область видимости с переменной isDisabled, почему бы не сделать это таким образом?

<button type="submit" ng-click="disableButton($event)">Submit</button>

$scope.disableButton = function($event) {
    $event.currentTarget.disabled = true;
};

если вам нужно отправить форму перед отключением.

этот код не проверен

<form ng-submit="disableFormSubmitButton($event)">
    <button type="submit">Submit</button>
</form>

$scope.disableFormSubmitButton = function($event) {
    $($event).find('[type=submit]').prop('disabled',true);
};

Ответ 5

Найдите также рабочий пример.

HTML

  <body ng-app="DisableButtonApp">
        <div ng-controller="MyAppCtrl">
            <button ng-click="someFunc()" ng-disabled="isDisabled" ng-model="isDisabled"type="submit">Submit</button>
        </div>
    </body>

JS:

angular.module('DisableButtonApp', [])
    .controller('MyAppCtrl',['$scope', function($scope){
    $scope.isDisabled = false;
    $scope.someFunc = function(){
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    };
}]);

Демо

Ответ 6

Для чего это стоит, вы можете сделать это непосредственно в шаблоне:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>

  <button ng-disabled="isDisabled" ng-click="isDisabled=true" type="submit">Submit</button> isDisabled={{isDisabled}}

</body>

Ответ 7

Вот ответ, который я получил, чтобы работать для моего сценария отправки одной формы:

$scope.increment = 0;
$scope.someFunc = function() {
     $scope.increment++
     if($scope.increment > 1) {
          return;
     } else {
          //do something else
   }
}

Не требуется никаких директив или HTMl.

Ответ 8

Из-за исторических причин одиночная (или) внутренняя подает форму, если тип не "submit".

Согласно MDN, кнопка может иметь атрибут типа.

<button type="button">Your button</button>

Кнопка

не имеет поведения по умолчанию.

Здесь более подробный ответ.

Ответ 9

Добавьте <input type="checkbox" ng-model="isDisabled"> и добавьте isDisabled в атрибут ng-disabled ng-disabled="isDisabled", поэтому при выборе кнопки флажка отключена и снимите флажок, включите кнопку.

См. ссылку http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview

Ответ 10

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
    <button type="submit" name="submit" class="btn btn-success" ng-disabled="isDisabled" ng-click="isDisabled=true">Hochladen</button> isDisabled={{isDisabled}}
</body>