Here we will learn how to use radio buttons in angularjs, bind data to radio buttons, how to bind array list to radio buttons using ng-repeat in angularjs and how to implement validation to check if any radio button selected or not in angularjs using ng-model directive with example.
In angularjs radio buttons are the form controls which will allow users to select any one option from multiple options in a forms. In angularjs by using ng-model directive we can get selected radio button option details.
Following is the example of using radio buttons in angularjs and how to get radio button selected value and implementing validations in application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS Radio Buttons Example with Validations
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('radibuttonApp', []);
app.controller('radiobuttonCtrl', function ($scope) {
$scope.checkoptions = function (choice) {
if ($scope.selectVal!=undefined)
$scope.msg = 'Selected Value: ' + $scope.selectVal;
else
$scope.msg = 'Please choose atleast one option';
};
});
</script>
</head>
<body ng-app="radibuttonApp" ng-controller="radiobuttonCtrl">
<div>
<h3>AngularJS Radio Buttons Example with Validations</h3>
<input type ="radio" name="userdetails" value="1" ng-model="selectVal" />Suresh<br />
<input type ="radio" name="userdetails" value="2" ng-model="selectVal" />Rohini<br />
<input type ="radio" name="userdetails" value="3" ng-model="selectVal" />Praveen<br /><br />
<input type="button" id="btnClick" value="Submit" ng-click="checkoptions()" /><br /><br />
<span style="color:Red">{{msg}}</span>
</div>
</body>
</html>
If you observe above angularjs example we used ng-model directive to get selected value from radio buttons and showing validation message based on ng-model value on button click. Now we will run and see the output.
Following is the result of using radio buttons in angularjs application example.
Following is the example of binding array list to radio buttons using ng-repeat directive.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Bind Array List to Radio Buttons using ng-repeat example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('radiobuttonApp', []);
app.controller('radiobuttonCtrl', function ($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Suresh"
}, {
"userid": 2,
"name": "Rohini"
}, {
"userid": 3,
"name": "Praveen"
}];
});
</script>
</head>
<body ng-app="radiobuttonApp" ng-controller="radiobuttonCtrl">
<div>
<h3>AngularJS Radio Buttons Binding using ng-repeat</h3>
<div ng-repeat="user in arrlist">
<input type="radio" name="userdetails" value="{{user.userid}}"/>
<label>{{user.name}}</label>
</div>
</div>
</body>
</html>
If you observe above angularjs example we used ng-repeat directive to loop through array list and bind that array list values to radio buttons. Now we will run and see the output of the angularjs example.
Following is the result of binding array list to radio buttons using ng-repeat directive in angularjs application example.
In angularjs by using ng-model directive we can get radio button selected value based on that we can show validation. Following is the example to check whether radio button selected or not in angularjs applications.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Radio Buttons Validation to Check if Anyone Selected or Not
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('radiobuttonApp', []);
app.controller('radiobuttonCtrl', function ($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Suresh"
}, {
"userid": 2,
"name": "Rohini"
}, {
"userid": 3,
"name": "Praveen"
}];
$scope.checkoptions = function (choice) {
var details = [];
if ($scope.selectedPerson!=undefined)
$scope.msg = 'Selected Value: ' + $scope.selectedPerson;
else
$scope.msg = 'Please choose an option';
};
});
</script>
</head>
<body ng-app="radiobuttonApp" ng-controller="radiobuttonCtrl">
<div>
<h3>AngularJS Radio Buttons Validation</h3>
<div ng-repeat="user in arrlist">
<input type="radio" name="userdetails" value="{{user.userid}}" ng-model="$parent.selectedPerson" />
<label>{{user.name}}</label>
</div><br />
<input type="button" id="btnClick" value="Submit" ng-click="checkoptions(arrlist)" /><br /><br />
<span style="color:Red">{{msg}}</span>
</div>
</body>
</html>
If you observe above angularjs example we used ng-repeat directive to loop through array list and bind that array list values to radio buttons and checking if any radio button option selected or not on button click. Now we will run and see the output of the angularjs example.
Following is the result to check if any radio button option selected or not in angularjs application example.
This is how we can use radio buttons in angularjs and bind data to radio buttons using ng-repeat directive and we can implement validations to radio buttons in angularjs based on our requirements.