Disable link after click angular js

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'">
<a href="javascript:void(0);" data-ng-click="PayNow()" class="btn-register">PAY NOW</a></div>

Answer 1

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

<a href="javascript:void(0);" data-ng-click="PayNow()" class="btn-register" ng-disabled="DisabledButton">PAY NOW</a>

Answer 2

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">
    <a href="javascript:void(0)" ng-click="PayNow()" ng-class="{disabled: isDisabled}">PAY NOW</a>
</div>

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({});
    }