Home >Web Front-end >JS Tutorial >Talk about hiding and showing in AngularJs_AngularJS

Talk about hiding and showing in AngularJs_AngularJS

WBOYOriginal: 2016-05-16 15:27:011218browse

AngularJS extends HTML with new properties and expressions.

AngularJS can build a single page application (SPAs: Single Page Applications).

The code is as follows:

<!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 directive is to display successfully matched elements. This directive needs to be used in conjunction with the ng-switch-when and ng-switch-default directives.
When the specified on value matches one or more elements with the ng-switch-when directive added, these elements are displayed and unmatched elements are hidden.
If no element matching the on value is found, the element with the ng-switch-default directive added will be displayed.

The above is the entire content of hiding and showing in AngularJs introduced in this article. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS method to determine whether the current page is opened in WeChat browser_javascript skillsNext article：JS method to determine whether the current page is opened in WeChat browser_javascript skills

See more

Talk about hiding and showing in AngularJs_AngularJS

Related articles