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 Set Radio Button Default Value Checked / Selected using ng-init Example

Jul 9, 2015
Introduction

Here I will explain how to set default value of radiobutton selected / checked in
AngularJS or radio button set default value checked or selected in AngularJS or show / hide div when radiobutton checked (selected) or option changed in AngularJS. By using ng-init, ng-show and ng-model properites we can set default value and we can show or hide div using AngularJS.

Description:
  
In previous articles I explained
Angularjs tutorial with simple hello world example, Angularjs show confirm dialog box on button click example 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 set default value of radibutton selected or checked and show or hide div on radio button selection in AngularJS.

To set default value selected in radiobutton and show / hide div based on radibutton selection using AngularJS we need to write the code like as shown below


<div data-ng-app="sampleapp" data-ng-controller="expressionController" ng-init="radioption='show'" >
<input id="first" type="radio" name="rdboption" ng-model="radioption" value="show">Show
<input id="Radio1" type="radio" name="rdboption" ng-model="radioption" value="hide">Hide <br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold" ng-show="radioption == 'show'">Hi Welcome to Angularjs... Hello World</div>
</div>

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 set default value of radiobutton & show / hide Div on radiobutton selection</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) {
});
</script>
</head>
<body>
<form id="form1">
<div data-ng-app="sampleapp" data-ng-controller="expressionController" ng-init="radioption='show'" >
<input id="first" type="radio" name="rdboption" ng-model="radioption" value="show">Show
<input id="Radio1" type="radio" name="rdboption" ng-model="radioption" value="hide">Hide <br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold" ng-show="radioption == 'show'">Hi Welcome to Angularjs... Hello World</div>
</div>
</form>
</body>
</html>

Demo

Angularjs Set Radio Button Default Value Checked / Selected using ng-init Example

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

0 comments :

Give your Valuable Comments

Other Related Posts

© 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.