Introduction:
Here I will explain how to show or hide div on button click (ng-click) in AngularJS or show / display or hide in AngularJS using button ng-click with example. By using “ng-show”, “ng-hide” properties in AngularJS we can show or hide div elements.
Description:
In previous articles I explained Angularjs show alert message, Angularjs ng-repeat example to bind dropdownlist, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show or hide div on button click (ng-click) in AngularJS.
In previous articles I explained Angularjs show alert message, Angularjs ng-repeat example to bind dropdownlist, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show or hide div on button click (ng-click) in AngularJS.
To show or hide div on button click in AngularJS
we need to write the code like as shown below
|
If you want to check it in complete example you need to
write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs show or hide
Div on button click</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var myApp =
angular.module('sampleapp', [])
myApp.controller("expressionController",
function ($scope) {
// Show Div
$scope.showDiv = function () {
$scope.showhideprop = true;
}
// Hide Div
$scope.hideDiv = function () {
$scope.showhideprop = false;
}
});
</script>
</head>
<body>
<form id="form1">
<div data-ng-app="sampleapp"
data-ng-controller="expressionController">
<input type="button"
ng-click="showDiv()"
value="Show
Div"/> <input type="button"
ng-click="hideDiv()"
value="Hide
Div"/> <br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold"
ng-show='showhideprop'>Hi
Welcome to Angularjs... Hello World</div>
</div>
</form>
</body>
</html>
|
Live
Demo
For
live demo try to click on Show or Hide buttons to show or hide div
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
above example is very useful for me
Note: Only a member of this blog may post a comment.