AngularJS Radio Buttons Binding with ng-repeat Validations (Checked) Example

  Total Views : 2737
  Comments : 0
 
  Keywords : Angularjs bind array list to radio button using ng-repeat with example, How to get radio button value in angularjs, Angularjs check if radio button selected (checked) or not validation

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.

AngularJS Radio Buttons

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.

AngularJS Radio Buttons Example

Following is the example of using radio buttons in angularjs and how to get radio button selected value and implementing validations in application.

 

Live Preview

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

Output of AngularJS Radio Buttons Example

Following is the result of using radio buttons in angularjs application example.

 

Angularjs radio buttons with validations example output or result

AngularJS Bind Radio Buttons using ng-repeat

Following is the example of binding array list to radio buttons using ng-repeat directive.

 

Live Preview

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

Output of AngularJS Radio Buttons with ng-repeat Example

Following is the result of binding array list to radio buttons using ng-repeat directive in angularjs application example.

 

Angularjs bind radio buttons using ng-repeat directive example output or result

AngularJS Radio Buttons Validation 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.

 

Live Preview

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

Output of AngularJS Radio Buttons Validation Example

Following is the result to check if any radio button option selected or not in angularjs application example.

 

Angularjs radio buttons with validations example output or resultThis 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. 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User