We can implement radio button using two different ways:-
1) using Array Object
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<div ng-repeat="item in arr"><input type="radio" value="{{item}}" name="a" ng-model="$parent.course" />{{item}}
</div>
<input type="button" value="Click" ng-click="fun()" />
<br><br>
{{msg}}
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope)
{
$scope.arr = ["C","CPP","DS","JAVA","PHP","iOS","Android"];
$scope.fun=function()
{
if ($scope.course!=undefined)
$scope.msg = $scope.course;
else
$scope.msg = 'Please choose an option';
}
}
)
</script>
</body>
</html>
2) using normal variable
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<input type="radio" value="C" name="a" ng-model="a" />C
<br><br>
<input type="radio" value="CPP" name="a" ng-model="a" />CPP
<br><br>
<input type="button" value="Click" ng-click="fun()" />
<br><br>
{{msg}}
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope)
{
$scope.fun=function()
{
$scope.msg=$scope.a;
}
}
)
</script>
</body>
</html>
1) using Array Object
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<div ng-repeat="item in arr"><input type="radio" value="{{item}}" name="a" ng-model="$parent.course" />{{item}}
</div>
<input type="button" value="Click" ng-click="fun()" />
<br><br>
{{msg}}
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope)
{
$scope.arr = ["C","CPP","DS","JAVA","PHP","iOS","Android"];
$scope.fun=function()
{
if ($scope.course!=undefined)
$scope.msg = $scope.course;
else
$scope.msg = 'Please choose an option';
}
}
)
</script>
</body>
</html>
2) using normal variable
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<input type="radio" value="C" name="a" ng-model="a" />C
<br><br>
<input type="radio" value="CPP" name="a" ng-model="a" />CPP
<br><br>
<input type="button" value="Click" ng-click="fun()" />
<br><br>
{{msg}}
</div>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope)
{
$scope.fun=function()
{
$scope.msg=$scope.a;
}
}
)
</script>
</body>
</html>
POST Answer of Questions and ASK to Doubt