Menu
I want to keep the state of my bootstrap.ui (OR ngdialog!!) modal window when it is closed. Any idea how I might ng-show/ng-hide a modal window?
Thanks.
304
Answer: Use the modal('hide') Method You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('show') and modal('toggle') .
First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design. You can use a function, another field or just some more inline-logic.
ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives. ng-hide can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.
AngularJS ng-hide Directive The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .
Look this example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div ng-app>
<div ng-init="showModal=false">
<button class="btn btn-primary btn-lg" ng-click="showModal = !showModal">
Launch demo modal
</button>
<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="showModal">
<div class="modal-dialog">
<div class="modal-content">
MODAL
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="showModal=false">Ok</button>
</div>
</div>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With