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 : stackoverflow.com/questions/15166184/…Sambath Kumar S– Sambath Kumar S2016-09-19 07:56:44 +00:00Commented Sep 19, 2016 at 7:56
-
1stackoverflow.com/questions/20305012/…Sambath Kumar S– Sambath Kumar S2016-09-19 07:56:57 +00:00Commented Sep 19, 2016 at 7:56
Add a comment
|
3 Answers
<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>
Comments
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 !
1 Comment
ngCoder
If the answer solves your problem, then you can accept the right answer !
<!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>