Let’s not overthink things…
Hiding and showing links, images and other elements is super easy using AngularJS.
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 }]); //
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 DIVOnly 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; } } }]); //
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