如何用条件隐藏角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这可以帮助你！