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!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|