DevTut

# Use of in-built directives

# 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>

Live Demo (opens new window)

Step by step explanation:

  1. ng-app="myDemoApp", the ngApp directive (opens new window) tells angular that a DOM element is controlled by a specific angular.module (opens new window) 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 (opens new window) and returns the module for chaining;
  6. ng-controller directive (opens new window) is key aspect of how angular supports the principles behind the Model-View-Controller design pattern.
  7. ng-show directive (opens new window) shows the given HTML element if expression provided is true.
  8. ng-hide directive (opens new window) hides the given HTML element if expression provided is true.
  9. ng-click directive (opens new window) fires a toggle function inside controller

← Custom Directives →