AngularJS Radio Buttons
ng-model directive is used to bind radio buttons in your applications.
Let's take an example to display some text, based on the value of the selected radio buttons. In this example, we are also using ng-switch directive to hide and show HTML sections depending on the value of the radio buttons.
See this example:
1) Select the Gender
<html>
<head>
<script src="angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('visController', function($scope) {
$scope.myForm = {};
$scope.myForm.gen = '';
$scope.flag=false;
$scope.msg=false;
$scope.save = function() {
if($scope.myForm.gen==''){
$scope.flag=true;
$scope.msg="Pleas select gender";
alert($scope.msg);
}else{
$scope.flag=true;
$scope.msg="You Have choosen "+$scope.myForm.gen;
alert($scope.msg);
}
}
});
</script>
</head>
<body>
<div ng-app="mainApp" >
<div ng-controller="visController">
<p>Select gender</p>
Male: <input type="radio" ng-model="myForm.gen"
value="Male"><br/>
Female: <input type="radio" ng-model="myForm.gen"
value="Female"> <br/>
You are
<button ng-click="save()">save</button>
<div ng-show="flag">{{msg}}</div>
<p style="color:green";> </p>
</div>
</div>
</body>
</html>
2)Select the two deferent options in radio buttons.
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="angular.min.js"></script>
<script>
var visapp = angular.module('visapp', []);
visapp.controller('visCtrl', function ($scope, $http, $timeout) {
$scope.vis='';
$scope.vis1='Nokia';
$scope.save=function (){
if($scope.vis==''){
alert("Please choose one");
}else{
alert("You have choosed :"+$scope.vis);
alert($scope.vis1);
}
}
});
</script>
</head>
<body>
<div ng-app="visapp">
<div ng-controller="visCtrl" ng-cloak>
<h4>Angularjs radio button checked value</h4>
<div class="radio">
<label><input type="radio" ng-checked="1" ng-init="vis='Apple'"
ng-model="vis" value="Apple">Apple</label>
</div>
<div class="radio">
<label><input type="radio" ng-model="vis"
value="Banana">Banana</label>
</div>
<h4>Another deafult radio checked example</h4>
<div class="radio">
<label><input type="radio" ng-checked="1"
ng-model="vis1" value="Nokia">Nokia</label>
</div>
<div class="radio">
<label><input type="radio" ng-model="vis1"
value="Sony">Sony</label>
</div>
<div class="right-fix dwn-nav com-marg">
<a class="btn btn-danger" ng-click="save()">Save</a>
<a class="btn btn-danger" href="">Cancel</a></div>
</div>
</div>
</body>
</html>
3)Show data in radio buttons.
<html>
<script src="angular.min.js"></script>
<body ng-app="">
<form>
Pick a topic:
<input type="radio" ng-model="myVis" value="html">Html
<input type="radio" ng-model="myVis" value="php">Php
<input type="radio" ng-model="myVis" value="java">Java
</form>
<div ng-switch="myVis">
<div ng-switch-when="html">
<h1>HTML</h1>
<p>Welcome to the best HTML code...</p>
</div>
<div ng-switch-when="php">
<h1>PHP</h1>
<p>Most famous Coures............</p>
</div>
<div ng-switch-when="java">
<h1>JAVA</h1>
<p>Welcome to the Languges......</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>
</body>
</html>
AngularJS Selectbox
ng-model directive is used to bind select boxes to your application.
See this example:
ComboBox Example:
<html>
<head>
<title>AngularJS combobox</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('ctrl', function($scope) {
$scope.months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
});
</script>
<style>
body{background-color:#000; font-family: Arial, sans-serif;
color: #fff;}
.sample{width:400px;margin:0 auto; border:1px solid #aaa;padding:20px;margin-top:20px;}
</style>
</head>
<body ng-app="myapp">
<div class="sample" align="center" ng-controller="ctrl">
<h1>AngularJS Combobox Vision</h1>
<select ng-model="selected" ng-options="opt as opt for opt in months" ng-init="selected=' September'"></select>
<h3>You have selected: {{selected}}</h3>
</div>
</body>
</html>
AngularJS form example
<html>
<head>
<title>Angular JS Forms</title>
<script src = "angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: lightpink;
}
table tr:nth-child(even) {
background-color: lightyellow;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<form name = "studentForm" novalidate>
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName" required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input name = "lastname" type = "text" ng-model = "lastName" required>
<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show = "studentForm.email.$error.required">Email is required.</span>
<span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td>
<button ng-click = "reset()">Reset</button>
</td>
<td>
<button ng-disabled = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid || studentForm.email.$dirty &&
studentForm.email.$invalid" ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "D.G";
$scope.lastName = "Prasad";
$scope.email = "dgprasad@gmail.com";
}
$scope.reset();
});
</script>
</body>
</html>
Sample AngularJS Form
Example: AngularJS Form
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController">
<h1>Student Information:</h1>
<form ng-submit="submitStudnetForm()" >
<label for="firstName" >First Name: </label><br />
<input type="text" id="firstName" ng-model="student.firstName" /> <br />
<label for="lastName">Last Name</label><br />
<input type="text" id="lastName" ng-model="student.lastName" /> <br />
<label for="dob" >DoB</label><br />
<input type="date" id="dob" ng-model="student.DoB" /> <br /><br />
<label for="gender" >Gender</label> <br />
<select id="gender" ng-model="student.gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br /> <br />
<span>Training Type:</span><br />
<label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label><br />
<label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label> <br /><br />
<span>Subjects</span><br />
<label><input type="checkbox" ng-model="student.maths" />Maths</label> <br />
<label><input type="checkbox" ng-model="student.physics" />Physics</label> <br />
<label><input type="checkbox" ng-model="student.chemistry" />Chemistry</label><br /><br />
<input type="submit" value="Submit" />
<input type="reset" ng-click="resetForm()" value="Reset" />
</form>
<script>
//1. create app module
var studentApp = angular.module('studentApp', []);
//2. create controller
studentApp.controller("studentController", function ($scope, $http) {
//3. attach originalStudent model object
$scope.originalStudent = {
firstName: 'James',
lastName: 'Bond',
DoB: new Date('01/31/1980'),
gender: 'male',
trainingType: 'online',
maths: false,
physics: true,
chemistry: true
};
//4. copy originalStudent to student. student will be bind to a form
$scope.student = angular.copy($scope.originalStudent);
//5. create submitStudentForm() function. This will be called when user submits the form
$scope.submitStudnetForm = function () {
var onSuccess = function (data, status, headers, config) {
alert('Student saved successfully.');
};
var onError = function (data, status, headers, config) {
alert('Error occured.');
}
$http.post('/student/submitData', { student:$scope.student })
.success(onSuccess)
.error(onError);
};
//6. create resetForm() function. This will be called on Reset button click.
$scope.resetForm = function () {
$scope.student = angular.copy($scope.OriginalStudent);
};
});
</script>
</body>
</html>
The following is a step by step explanation of the above example:
- Create an HTML page and wrap all the necessary input controlls into <form> tag.
- Create the AngularJS application module in the <script> tag.
- Create studentController in application module.
- Create originalStudent object and attach to the $scope with required properties. This will stay unchanged during entire life cycle.
- Create new student object and attach to the $scope and copy all the properties and values from originalStudent. This student object will be bound to the form using ng-model directive. Therefore, if user changes form values then sudent object will also get changed.
- Create submitStudnetForm function which will get called when user submits the form using Submit button. Here, send http POST request to the remote server to submit the data using $http service.
- Create resetForm() function, which will reset the form values to the originalStudent values by copying it to student object.
- Apply ng-app, ng-controller directives.
- Apply ng-model directives to each HTML input element to bind appropriate properties of student object.
- Apply ng-submit directive to form which will call submitStudentForm() on the form submit event.
- Apply ng-click directive to reset button which will call resetForm() on the button click event.
An AngularJS form can be submitted using either ng-submit or ng-click directive but not both.
Ng-submit: Binds angular expression to onsubmit event when form does not include action attribute.
Ng-click: Binds angular expression to onclick event.
Note : The angular form can be submitted using ng-submit directive on the form tag or using ng-click directive on <input type="submit" /> element. Use either ng-submit or ng-click directive but not both to submit the form. The form will be submitted twice if both ng-submit and ng-click directives are used.
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743