Home > Web Front-end > JS Tutorial > body text

Talk about hiding and showing in AngularJs_AngularJS

WBOY
Release: 2016-05-16 15:27:01
Original
1205 people have browsed it

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> 
Copy after login

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.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template