Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs Show Hide Div when Checkbox is Checked using ng-change Event

May 9, 2015
Introduction

Here I will explain how to show or hide div when checkbox is checked / selected using
AngularJS or show or hide div when checkbox checked (selected) or unchecked in AngularJS or show / hide div based on checkbox click / selection in AngularJS.

Description:
  
In previous articles I explained
Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to show or hide div when checkbox is checked / selected in AngularJS.

To show or hide div when checkbox is checked or selected using AngularJS we need to write the code like as shown below


// Show or Hide Div
$scope.showHideDiv = function () {
if ($scope.chkStatus) {
$scope.showhideprop = true;
}
else {
$scope.showhideprop = false;
}
}

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 Check whether Checkbox Selected or Not</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 or Hide Div
$scope.showHideDiv = function () {
if ($scope.chkStatus) {
$scope.showhideprop = true;
}
else {
$scope.showhideprop = false;
}
}
});
</script>
</head>
<body>
<form id="form1">
<div data-ng-app="sampleapp" data-ng-controller="expressionController">
Show or Hide Div: <input type="checkbox" ng-model="chkStatus" ng-change="showHideDiv()"/> <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 select or unselect below checkbox to show or hide div



Show or Hide Div:


Hi Welcome to Angularjs... Hello World

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 RSS subscribe by email Subscribe by Email

3 comments :

Unknown said...

Cant we do without ng-change ??

Unknown said...

Really it was help full thanks for this post :)

Unknown said...

you can replace ng-change with ng-checked

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.