Online Snippets Library

Show and Hide HTML elements using AngularJS

To show and hide HTML elements using AngularJS,we will use ngShow,ngClick directive of AngularJS.

AngularJS ngClick directive allows us to specify custom behavior when an element is clicked.

AngularJS ngShow directive is used to shows or hides the given HTML element based on the expression provided to the ngShow attribute.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="showhideApp" ng-controller="showhideController">
<button ng-click="showDiv()">Show me</button><button  ng-click="hideDiv()">Hide me</button>
<div ng-show ="IsShowHide">My DIV</div>
</div>
</body>
</html>
JavaScript
var app = angular.module('showhideApp', [])
app.controller('showhideController', function ($scope) {
//This will hide the DIV by default.
$scope.IsShowHide = true;
$scope.showDiv = function () {
//Show hidden DIV.
$scope.IsShowHide =true;
 }
$scope.hideDiv = function () {
//Hide visible DIV.
$scope.IsShowHide =false;
 }
});