python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions