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>

或者如果您要分配一些字符串值，例如＆＃39; display＆＃39;那就像

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

Answer 2

您可以使用ng-show和ng-hide甚至ng-if。让我们看一下如何在您的情况下使用这些指令的示例。例如，我们要显示保存按钮＆amp;仅在发送内容后删除发送按钮，如果用户点击关闭按钮，我们不想同时显示保存和发送按钮，下面是如何使用它们的示例代码。

在您的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-show / ng-hide和ng-if.Hope这对你有帮助！

Answer 3

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController">
      <button type="submit" class="btn btn-primary" ng-disabled="isDisabled" ng-click="save()">Test</button>      
      <button type="submit" ng-hide="firts" class="btn btn-danger">Firts</button>   
      <button type="submit" ng-hide="Second" class="btn btn-info">Second</button>
    </div>
  </body>
  <script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController', function ($scope) {
      $scope.isDisabled = false;
      $scope.Second = true;
      $scope.save = function () {
        $scope.isDisabled = true;
        $scope.firts =true;
        $scope.Second = false;
      };
    });
  </script>
</html>

如何在有条件的角度js中隐藏按钮？

3 个答案: