AngularJS Use of in-built directives Hide/Show HTML Elements
Example
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:
ng-app="myDemoApp", the ngApp directive tells angular that a DOM element is controlled by a specific angular.module named "myDemoApp".<script src="[//angular include]">include angular js.HideShowControllerfunction is defined containing another function namedtogglewhich help to hide show the element.angular.module(...)creates a new module..controller(...)Angular Controller and returns the module for chaining;ng-controllerdirective is key aspect of how angular supports the principles behind the Model-View-Controller design pattern.ng-showdirective shows the given HTML element if expression provided is true.ng-hidedirective hides the given HTML element if expression provided is true.ng-clickdirective fires a toggle function inside controller
