Preface
This article describes the use of the ng-show and ng-hide instructions provided by AngularJS to automatically listen for a Boolean variable to change the display state of the element.
There are n methods to control the display and hiding of html elements: html hidden, css display, jQuery hide() and show(), and bootstrap. Today's focus is not to show and hide, but to listen to a certain Boolean variable value and automatically change the display and hide state of the element. Listen to functions, if judgment, select dom, set dom, and 5 lines of code can't handle it, and there is no technical content.
Example 1
<body>
<div ng-controller="VisibleController">
<p ng-show="visible">String1</p>
<p ng-hide="visible">String2</p>
<button ng-click="toggle()">Switch</button>
</div>
<script src="../lib/angularjs/1.2.26/"></script>
<script>
function VisibleController($scope) {
$ = false;
$ = function () {
$ = !$;
}
}
</script>
</body>
The two directives are simple, just that ng-show is displayed when true, hidden when false, while ng-hide is the opposite effect.
Showing and hiding elements is a core feature for menus, context-sensitive tools, and many other situations. Like other features in Angualr,Angular drives UI refresh by modifying the data model., and then use instructions to reflect the changes to the UI.
The functions of the two instructions ng-show and ng-hide are equivalent, but the operation effect is exactly the opposite. We can both display or hide elements according to the passed expression. That is to say, ng-show will display elements when the expression is true, and ng-hide will hide elements when it is false;
How it works
The working principle of these two instructions is: set the element style to display:block according to actual situations to display the element; set to display:none to hide the element.
Example 2
<body ng-controller='ShowController'>
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show=''>
<li>Stun</li>
<li>Disintegrate</li>
<li>Erase from history</li>
</ul>
<script src="lib/angular/"></script>
<script>
var myApp=('myApp',[]) ('ShowController',function($scope) {$={show: false},$=function() {$=!$;}});
</script>
</body>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!