How to show and hide stuff with AngularJS

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


//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.

one comment ( awaiting your reply! )

  • Hi, Thanks for your post. I am just looking for a code to show the dummy thumbnails in the body of the webpage, when we click the search button using angular js.

    -- Janu