如何使按鈕禁用

我有這個按鈕：如何使按鈕禁用

<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

如何使按鈕禁用

回答

相關問題