radio button list in ng repeat angularjs

Radio button list in ng-repeat AngularJs

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.