Disable link after click angular js - angularjs

Question

Could anybody help me with a solution.
I need to make the link disabled (PAY Now) after clicking on that to avoid multi clicking.
<div class="Class1" data-ng-show="ShowButton == 'TRUE'">
PAY NOW</div>

Answer 1

There is no disabled attribute for hyperlinks. If you don't want to do something with that you'll need to add some style into the <a> tag altogether and handle the flag into the controller.
Try this :
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isDisabled = false;
if($scope.isDisabled === false) {
$scope.PayNow = function() {
$scope.isDisabled = true;
}
}
}]);
.disabled {
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
PAY NOW
</div>

Answer 2

You can in the PayNow() function create an extra variable which disables the button like so:
JS:
$scope.PayNow = function() {
$scope.DisabledButton = true;
// other code
}
HTML
PAY NOW

Answer 3

In your html
.disabled {
cursor: not-allowed;
}
<a ng-click="PayNow()" ng-class="{'disabled': DisabledButton}">Add</a>
OR
<button ng-click="PayNow()" ng-disabled="DisabledButton">Add</button>
In JS
$scope.DisabledButton = false;
$scope.PayNow = function() {
$scope.DisabledButton = true;
// other code
...
//when you want to re-enable
$scope.DisabledButton = false;
}

Answer 4

i hope if this can help you!!!. So in my example I am using condition to check the length of the array and constraining the button to make more textboxes. Plus you can use count instead.
$scope.technologies = [];
$scope.addtech = function () {
$scope.minus = true;
if ($scope.technologies.length < 3)
$scope.technologies.push({});
}