如何用條件隱藏角js中的按鈕？

Question

我有三個按鈕：

<button class="btn btn-success">Save</button> 
<button class="btn btn-success">Send</button> 
<button class="btn btn-success">Close</button> 

我想知道如何隱藏按鈕與條件？

Answer 1

<button ng-show="ShowSave" class="btn btn-success">Save</button> 
<button ng-show="ShowSend" class="btn btn-success">Send</button> 
<button ng-show="ShowClose" class="btn btn-success">Close</button> 

這裏ShowSave，ShowSend，ShowClose將布爾將在您的控制器設置

$scope.ShowSave = true; 

如果上述屬實，它將顯示按鈕，並在虛假它隱藏按鈕的情況。

現在你可以檢查它的條件也很喜歡

<button ng-show="ShowSave == true" class="btn btn-success">Save</button> 

，或者如果您分配像「顯示」一些字符串值，那麼它會像

<button ng-show="ShowSave == 'display' ? true : false" class="btn btn-success">Save</button> 

Answer 2

您可以使用ng-show和ng-hide甚至ng-if。讓我們看看我們如何在你的情況下使用這些指令的例子。例如，我們想要顯示保存按鈕&只有在發送了一些東西后，如果用戶點擊了clos e按鈕我們不想同時顯示保存和發送按鈕，下面是如何使用它們的示例代碼。

在HTML

<button class="btn btn-success" ng-if="showBtns" ng-show="showSave" ng-click="save()">Save</button> 
<button class="btn btn-success" ng-if="showBtns" ng-hide="showSave "ng-click="send()">Send</button> 
<button class="btn btn-success" ng-click="close()">Close</button> 

在您的JS

$scope.showSave = false; 
$scope.showBtns = true; 
$scope.send= function(){ 
     $scope.showSave = true; 
}; 

$scope.close = function(){ 
     $scope.showBtns =false; 
} 

這裏是article何時使用NG-顯示/ NG隱藏和NG-if.Hope這可以幫助你！