This article illustrates the ANGULARJS implementation of DOM element display and hiding function. Share to everyone for your reference, specific as follows:
The display and hiding of the DOM element is the function that is used in the front-end development, the ANGULARJS uses the Ng-hide/ng-show two attributes to realize that we can implement all functions by using one of the properties. Their values are Boolean.
"HTML code"
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">
<title> angularjs show hidden elements </ title>
<meta name = "description" content = "">
<meta name = "keywords" content = "">
<link href = "" rel = "stylesheet">
</ head>
<body ng-app = "showHide">
<div ng-controller = "showElements">
<div ng-show = "butshow"> I appeared </ div>
<button ng-click = "toggle ();"> Show / Hide </ button>
</ div>
</ body>
<script src = "./ js / angular.min.js"> </ script>
<script>
angular.module ("showHide", []). controller ('showElements', ['$ scope', function ($ scope) {
$ scope.butshow = true;
$ scope.toggle = function () {
$ scope.butshow =! ($ scope.butshow);
}
}])
</ script>
</ html>
PS: Here's the problem: when I set the $scope. But.show variable, there are a lot of errors, do not allow this set of variables?
Have the knowledge of the great God Welcome to add, thank you!
More interested readers of ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorial", "jquery common Plug-ins and Usage summary", "JavaScript Operation DOM Skills summary" and "JQuery Operation Dom Node method summary"
I hope this article will help you to Angularjs program design.
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
