Hello
everyone, I am going to share the code sample for display radio button list in
angularjs ng-repeat with a default checked as given below
The
live demo link http://embed.plnkr.co/1JaEo7/preview
The
angularjs code-sample
var app = angular.module("radioApp", []);
app.controller('radioCtrl',
function ($scope, $rootScope) {
$scope.radii = [{
price: '$10',
checked: true,
name: "Messaging Value
Packes"
}, {
price: '$15',
checked: false,
name: "International Value
Packs"
}];
$scope.handleRadioClick = function (radius) {
alert(radius.price);
};
});
The
HTML code sample
<div ng-app="radioApp" ng-controller="radioCtrl">
<div ng-repeat="radius in radii" id="radio-{{radius.price}}">
<label>
<input type="radio" name="radius" ng-checked="radius.checked" ng-change="handleRadioClick(radius)" ng-model="selectedValue.price" value="{{radius.price}}">{{radius.name}}
</label>
</div>
</div>
The
Live demo code ( HTML + Angular) sample as give below.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script>
var app = angular.module("radioApp", []);
app.controller('radioCtrl',
function ($scope, $rootScope) {
$scope.radii = [{
price: '$10',
checked: true,
name: "Messaging Value
Packes"
}, {
price: '$15',
checked: false,
name: "International Value
Packs"
}];
$scope.handleRadioClick = function (radius) {
alert(radius.price);
};
});
</script>
</head>
<body ng-app="radioApp" ng-controller="radioCtrl">
<div ng-repeat="radius in radii" id="radio-{{radius.price}}">
<label>
<input type="radio" name="radius" ng-checked="radius.checked" ng-change="handleRadioClick(radius)" ng-model="selectedValue.price" value="{{radius.price}}">{{radius.name}}
</label>
</div>
</body>
</html>
The output : go to below for plunker
link http://embed.plnkr.co/1JaEo7/preview
Thank you!