如何使按钮禁用

我有这个按钮：如何使按钮禁用

<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-点击（）我的数据保存到数据库，但按钮保持启用状态，如果我点击它一次又一次地在db中创建许多记录副本。当我点击save时，如何禁用我的按钮？

JSFIDDLE

来源

2015-09-16 HUSTLIN

你可以给一些更多的信息请??你什么时候禁用这个按钮？在什么条件下？或者你想让它一直禁用:)？ – macrog

当我的数据成功保存到数据库，页面将刷新，所以我需要使按钮禁用，当我点击它 – HUSTLIN

您需要在这种情况下

<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.. 
};

来源

2015-09-16 10:59:04 Rayon

您需要使用ng-disabled然后添加submit()函数里面的一些条件使用ng-disabled。

E.g.

HTML

在submit button添加ng-disabled="submitClicked"。

<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>

$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.

希望这有助于。

来源

2015-09-16 11:04:35

使用下面的代码

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

来源

2015-09-16 11:35:03 Daniel

如何使按钮禁用

回答

相关问题