Case ONE: control HTML element display and hide there are n ways: HTML hidden, CSS display, jquery hide () and show (), Bootstrap. Hide. Today's focus is not on showing and hiding, but on listening to a Boolean variable that automatically changes the display and hidden state of the element. Listening functions, if judgments, selecting the DOM, setting the dom,5 line of code, and no technical content.
Look at the code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-show and ng-hide directives</title>
</head>
<body>
<div ng-controller="VisibleController">
<p ng-show="visible">字符串1</p>
<p ng-hide="visible">字符串2</p>
<button ng-click="toggle()">切换</button>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function VisibleController($scope) {
$scope.visible = false;
$scope.toggle = function () {
$scope.visible = !$scope.visible;
}
}
</script>
</body>
</html>
case two: for menus, context-sensitive tools, and many others, displaying and hiding elements is a core feature. As with other features in Angualr, angular drives UI refreshes by modifying the data model and then responds to the UI with instructions.
The functions of the two instructions Ng-show and ng-hide are equivalent, but the effect is the opposite, and we can all show or hide elements based on the expressions we pass. That is, ng-show will display the element when the expression is true, and the element will be hidden when false, whereas Ng-hide is the opposite.
The two instructions work by setting the element's style to Display:block to display the element according to the actual situation, and setting it to display:none to hide the element.
Instance:
<html ng-app='myApp'>
<head>
<title>ng-show instance</title>
</head>
<body ng-controller='ShowController'>
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show='menuState.show'>
<li>Stun</li>
<li>Disintegrate</li>
<li>Erase from history</li>
</ul>
<script src="lib/angular/angular.js"></script>
<script>var myApp=angular.module('myApp',[]) myApp.controller('ShowController', function($scope) {$scope.menuState={show: false}$scope.toggleMenu=function() {$scope.menuState.show=!$scope.menuState.show;}});</script>
</body>
</html>
Run Result:
Click on the "Toggle menu" button, the effect is as follows:
Click on the "Toggle Menu" button again, the following information is hidden, alternating transformation.
Case THREE:
<!DOCTYPE html>
<html ng-app="a2_12">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
<style type="text/css">
body{
font-size: 12px;
}
ul{
list-style-type: none;
width: 408px;
margin: 0px;
padding: 0px;
}
div{
margin: 8px 0px;
}
</style>
</head>
<body>
<div ng-controller="c2_12">
<div ng-show="{{isShow}}">脚本</div>
<div ng-hide="{{isHide}}">1012@qq.con</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when="1">11111111111111111</li>
<li ng-switch-when="2">22222222222222222</li>
<li ng-switch-default>33333333333333333</li>
</ul>
</div>
<script type="text/javascript">
var a2_12 = angular.module('a2_12', []);
a2_12.controller('c2_12', ['$scope', function($scope) {
$scope.isShow=true;
$scope.isHide=false;
$scope.switch=2;
}]);
</script>
</body>
</html>
The function of the ng-switch instruction is to display the element that matches the success, which needs to be used in conjunction with Ng-switch-when and Ng-switch-default directives.
When the specified on value matches one or more elements that add ng-switch-when directives, these elements display a hidden element that is not matched.
If an element that matches the on value is not found, the element that added the Ng-switch-default directive is displayed.
The above is for everyone to share the three angularjs to achieve display and hidden three cases, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
