How to show and hide stuff with AngularJS

by: Cesar Serna

Let’s not overthink things…

Hiding and showing links, images and other elements is super easy using AngularJS.

Show or Hide based on SCOPE

Starting with a simple div an default value, Angular can hide or show elements. Below shows a div element that is dependent on a SCOPE property to either show or hide.

//This could be just about any element that 
//you need hidden or shown.

 Only show if SCOPE is set to visible 

//

//
//
angular.module('app').controller('myCtrl', ['$scope', function($scope){

$scope.isVisible = false; // will hide div

$scope.isVisible = true; // will show div

}]);
//

Show or Hide based on NG-CLICK

Building on our previous code, we can now add an NG-CLICK to an element in our template to control scope state and toggle our div off and on.

Included in the example below, I use NG-CLICK inside a BUTTON and an AHREF. If you notice within the function call, I can pass the $event object. The $event object is used to either prevent default behavior ( $event.preventDefault() ) or to stop the bubble up ( $event.stopPropagation() ).

//OUR BUTTON
BUTTON TOGGLE

//OUR LINK
LINK TOGGLE

//OUR DIV
 Only show if SCOPE is set to visible 

//

//
//
angular.module('app').controller('myCtrl', ['$scope', function($scope){

$scope.isVisible = false; // let's set this to false to kick things off.

$scope.toggleDiv(event)
{
    event.preventDefault(); // included to show how to prevent default behavior
    event.stopPropagation(); // included to show how to stop propagation

    if ($scope.isVisible == false)
    {
         $scope.isVisible = true;
    }
    else
    {
         $scope.isVisible = false;
    }
}

}]);
//

Keep AngularJS Simple…

There you have it, simple easy way to show and hide a div using AngularJS.

Looking for more examples? Let me know what code samples you want by leaving a comment below.