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.
<!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;
}
});
