How to hide a button in angular js with conditions?

Question

I have three buttons:

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

I want to know how to hide button with conditions?

refer : http://stackoverflow.com/questions/15166184/are-complex-expressions-possible-in-ng-hide-ng-show — Sambath Kumar S, Sep 19 '16 at 07:56
http://stackoverflow.com/questions/20305012/angularjs-ng-if-with-multiple-conditions — Sambath Kumar S, Sep 19 '16 at 07:56

score 2 · Answer 1 · answered Sep 19 '16 at 07:58

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

here ShowSave, ShowSend, ShowClose will be Boolean which will be set in your controller

$scope.ShowSave = true;

If above is true it will display button and in case of false it hide your button.

Now you can check it as condition also like

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

or if you are assigning some string value like 'display' then it will be like

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

score 1 · Answer 2 · answered Sep 19 '16 at 08:25

You can use ng-show and ng-hide or even ng-if.Lets see an example on how we can use these directives in your case.For instance we want to show save button & remove send button only after sending something and if user clicks on close button we don't want to display both save and send buttons,then below is the sample code of how they should be used.

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

In your JS

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

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

Here is article on when to use ng-show/ng-hide and ng-if.Hope this helps you !

If the answer solves your problem, then you can accept the right answer ! — ngCoder, Sep 19 '16 at 09:23

score 1 · Answer 3 · answered Oct 21 '18 at 21:53

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

How to hide a button in angular js with conditions?

3 Answers3