MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Hide Show HTML Elements


This example hide show html elements.

<!DOCTYPE html>
<html ng-app="myDemoApp">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script>
function HideShowController() {
var vm = this;
vm.show=false;
vm.toggle= function() {
vm.show=!vm.show;
}
}
angular.module("myDemoApp", [/* module dependencies go here */])
.controller("hideShowController", [HideShowController]);
</script>
</head>
<body ng-cloak>
<div ng-controller="hideShowController as vm">
<a style="cursor: pointer;" ng-show="vm.show" ng-click="vm.toggle()">Show Me!</a>
<a style="cursor: pointer;" ng-hide="vm.show" ng-click="vm.toggle()">Hide Me!</a>
</div>
</body>
</html>

Step by step explanation:


1. ng-app="myDemoApp", the ngApp directive tells angular that a DOM element is controlled by a specific angular.module named "myDemoApp".
2. < script src="[//angular include] "> include angular js.
3. HideShowController function is defined containing another function named toggle which help to hide show the element.
4. angular.module(...) creates a new module.
5. .controller(...) Angular Controller and returns the module for chaining;
6. ng-controller directive is key aspect of how angular supports the principles behind the Model-View-Controller design pattern.
7. ng-show directive shows the given HTML element if expression provided is true.
8. ng-hide directive hides the given HTML element if expression provided is true.
9. ng-click directive fires a toggle function inside controller.


Conclusion

In this page (written and validated by ) you learned about AngularJS Hide Show HTML Elements . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Custom Directives.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.