Question

我有这个按钮：

<div class="ticket-edit-menu-el helper-float-left">
    <button class="btn btn-save" ng-click="submit()">
        <span class="btn-save-text">SAVE</span>
    </button>
</div>

控制器：

$scope.submit = function () {
    $scope.editticketDescription($scope.getDescription());
    var validation = $scope.isTicketValid();
    if (validation == true) {
        ticketsService.postTicket($scope.ticket);
    } else {
        console.log(validation);
        $rootScope.$emit('newticketerror:' + validation);
    }
};

在ng-click（）上我的数据保存到db，但是按钮保持启用状态，如果我再次点击它会在db中创建许多记录副本。点击save时如何禁用我的按钮？

JSFIDDLE

Answer 1

在这种情况下，您需要使用ng-disabled

<div class="ticket-edit-menu-el helper-float-left">
    <button class="btn btn-save" ng-disabled='isDisabled' ng-click="submit()">
        <span class="btn-save-text">SAVE</span>
    </button>
</div>

$scope.isDisabled=false;
$scope.submit = function () {
    $scope.isDisabled=true;
    $scope.editticketDescription($scope.getDescription());
    var validation = $scope.isTicketValid();
    if (validation == true) {
        ticketsService.postTicket($scope.ticket);
    } else {
        console.log(validation);
        $rootScope.$emit('newticketerror:' + validation);
    }
    //    $scope.isDisabled=false; when IO operation is done..
};

Answer 2

您需要使用ng-disabled，然后在submit()功能中添加一些条件。

<强> E.g。

<强> HTML

在ng-disabled="submitClicked"。

中添加submit button

<div class="ticket-edit-menu-el helper-float-left">
    <button class="btn btn-save"
            ng-click="submit()"
            ng-disabled="submitClicked">
        <span class="btn-save-text">SAVE</span>
    </button>
</div>

<强> JS

$scope.submit = function() {
    if (!$scope.submitClicked) {
        $scope.submitClicked = true;
        $scope.editticketDescription($scope.getDescription());
        var validation = $scope.isTicketValid();
        if (validation == true) {
            ticketsService.postTicket($scope.ticket);
            $scope.submitClicked = false; // add this if the postTicket function failed to re-enable the button
        } else {
            console.log(validation);
            $rootScope.$emit('newticketerror:' + validation);
            $scope.submitClicked = false;
        }
    }
};

<强>更新

$scope.submitClicked = false; // use this code if ever the submission has failed or the server returns an error to re-enable the submit button and make it clickable again.

希望这有帮助。

Answer 3

使用以下代码

 <div class="ticket-edit-menu-el helper-float-left">
  <button class="btn btn-save" ng-disabled='isDisabled' ng-click="submit()">
    <span class="btn-save-text">SAVE</span>
  </button>
 </div>

 $scope.isDisabled=false;
 $scope.submit = function () {
 $scope.isDisabled=true;
 $scope.editticketDescription($scope.getDescription());
 var validation = $scope.isTicketValid();
 if (validation == true) {
    ticketsService.postTicket($scope.ticket);
 } else {
    $rootScope.$emit('newticketerror:' + validation);
 }
};

如何禁用按钮

3 个答案: