angularjs - 单击angular js后禁用链接

Question

任何人都可以帮助我解决问题。单击该链接后，我需要禁用链接（立即付款）以避免多次单击。

<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

没有禁用属性hyperlinks。如果您不想对此做某事，则需要将一些样式<a>完全添加到标签中并将标志处理到控制器中。

尝试这个 ：

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 2

您可以在 PayNow() 函数中创建一个额外的变量来禁用按钮，如下所示：

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 3

在你的 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>

在 JS 中

$scope.DisabledButton = false;
$scope.PayNow = function() {
    $scope.DisabledButton = true;
    // other code 
    ...
    //when you want to re-enable
   $scope.DisabledButton = false;
}

Answer 4

我希望这可以帮助你！！！！因此，在我的示例中，我使用条件来检查数组的长度并约束按钮以创建更多文本框。另外，您可以使用 count 代替。

$scope.technologies = [];
    $scope.addtech = function () {
        $scope.minus = true;
        if ($scope.technologies.length < 3)
            $scope.technologies.push({});
    }