Angularjs에서 여러 개의 제출을 방지하기 위해 클릭 한 번 후 제출 버튼을 비활성화하려면 어떻게 해야 합니까?
이 문제에 대한 해결책에 대한 몇 가지 스택 오버플로우 예를 포함하여 웹을 모두 찾아봤습니다.구체적으로 말하면, 나는 이것을 시도했다.
var disableButton = function() {
document.getElementById('<%= btnSubmit.ClientID %>').disabled = true;
}
$scope.isDisabled = false;
var someFunc = function() {
$scope.isDisabled = true;
}<button OnClientClick="disableButton()" type="submit">Submit</button>
<button ng-disabled="isDisabled" type="submit">Submit</button>둘 다 광고대로 작동하지 않았다.다른 조언은 없나요?Angular 제안만 해주세요.감사해요.
당신은 정답에 매우 가까웠습니다.네가 놓친 건 전화한 것뿐이야someFunc()을 사용하여 버튼 조작을 하다ng-click.
또 다른 문제는 컨트롤러의 기능이$scope.someFunc()가 아니라var someFunc()
작업 예:index.html은 다음과 같습니다.
<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>
컨트롤러 어플리케이션.js는 다음과 같습니다.
angular.module('demo', [])
.controller('demoController',function($scope){
$scope.isDisabled = false;
$scope.disableButton = function() {
$scope.isDisabled = true;
}
});
또 다른 방법은 송신 버튼을 무효로 하는 지시문을 작성하는 것입니다.
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>
모든 답변이 글로벌 범위를 뒤죽박죽으로 만들었기 때문에 저는 제공된 답변 중 어느 것도 마음에 들지 않았습니다.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);
};
다음을 사용해 보십시오.
<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>
또, 이 기능을 실현하기 위한 다양한 어프로치가 있습니다.다음 링크를 참조하면 도움이 됩니다.
동작 예도 참조해 주세요.
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;
};
}]);
템플릿에서 직접 이 작업을 수행할 수 있습니다.
<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>싱글 폼 제출 시나리오에 대한 답변은 다음과 같습니다.
$scope.increment = 0;
$scope.someFunc = function() {
$scope.increment++
if($scope.increment > 1) {
return;
} else {
//do something else
}
}
지시나 HTML은 필요 없습니다.
과거의 이유로 유형이 '제출'이 아닌 경우 내부에서 단일(또는 ) 양식을 제출합니다.
MDN에 따르면 버튼은 유형 속성을 가질 수 있습니다.
<button type="button">Your button</button>
버튼에 디폴트 동작이 없게 합니다.
여기 좀 더 자세한 답이 있다.
더하다<input type="checkbox" ng-model="isDisabled">ng-disabled Atribute에 isDisabled를 추가합니다.ng-disabled="isDisabled"체크박스를 켜면 비활성화되고 체크박스를 끄면 활성화버튼이 표시됩니다.
링크 http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview 를 참조해 주세요.
<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>
언급URL : https://stackoverflow.com/questions/29984581/how-do-you-disable-the-submit-button-after-a-single-click-to-prevent-multiple-su
'source' 카테고리의 다른 글
| Yesod의 예외 (0) | 2023.04.04 |
|---|---|
| Angular JS - 양식 억제 제출 취소 버튼 (0) | 2023.04.04 |
| 반응/축소 및 다국어(국제화) 애플리케이션 - 아키텍처 (0) | 2023.03.25 |
| ASP에 시간이 없는 날짜.NET Web API의 JSON 출력 (0) | 2023.03.25 |
| 형식 스크립트에서 사전 선언 및 초기화 (0) | 2023.03.25 |