In this tutorial we will show you the solution of angularjs radio button default checked, using directive of ‘ng-init’ we used to initializing particular radio option defaultly checked.
Ng-init is used to initialize an angularjs application data. It defines the initial value for an angularjs application and assigns values to the variables.
The ng-init directive defines initial values and variables for an angularjs application.
Step By Step Guide On Angularjs Radio Button Default Checked :-
In our application we defined ng-init directive for defaultly check one radio button option in angularjs.
Here we defining two or more radio options we grouping radio options by attribute ‘ng-model’ with same value of ‘radioption’ so we can select particular one from that using ‘value’ attribute value ‘show’.
This is initialized in <div> tag by ‘ng-init’ directive with value ‘radioption=”show”’.
<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="ctrl" ng-init="radioption='show'">
<input type="radio" ng-model="radioption">Green
<input type="radio" ng-model="radioption">Rose
<input type="radio" ng-model="radioption" value="show">Pink
<input type="radio" ng-model="radioption">White
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In controller we created ‘app’ variable used to store our application ‘myapp’ and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements and function with parameters ‘$scope object.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- In <div> tag we defined our application with directives of ng-app with name ‘myapp’ it defines our application and ng-controller ‘ctrl’, ng-init.
- Using ng-init we initializing radio option with ng-model of ‘radioption’ with value of ‘show’ option will defaultly checked on webpage.
- So the radio option of ‘Pink’ will default checked option from collections of radio option.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create radio button with default checked using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing program on browser it displays collection of radio option with one default checked radio option.
I hope this tutorial on angularjs radio button default checked helps you and the steps and method mentioned above are easy to follow and implement.
