In this article I will explain with an example, how to build a RadioButtonList i.e. List of multiple RadioButtons in AngularJS.
The RadioButtonList i.e. List of multiple RadioButtons will be populated from a JSON array using the ng-repeat directive in AngularJS.
 
 
Populate list of multiple RadioButtons using ng-repeat in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
The AngularJS app HTML DIV consists of another HTML DIV with a RadioButton and Label elements. The ng-repeat directive has been applied to the HTML DIV in order to populate RadioButtonList i.e. List of multiple RadioButtons from a JSON array.
The value attribute of the RadioButton has been assigned the FruitId property.
The ng-model attribute of the RadioButton has been assigned the SelectedFruitId Model variable. Thus whenever a RadioButton is selected, the SelectedFruitId Model variable will contain the value of the selected RadioButton.
Note: The SelectedFruitId Model variable is accessed using $parent scope as ng-repeat creates its own $scope.
The Button has been assigned ng-click directive. When the Button is clicked, the GetValue function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
Inside the function, a loop is executed over the JSON array and the value of the selected RadioButton i.e. the FruitId is fetched from the SelectedFruitId Model variable.
The FruitId value is used to fetch the Name property from the JSON array.
Finally the Fruit Id and Name of the selected RadioButton is displayed using JavaScript Alert Message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Fruits = [{
                FruitId: 1,
                Name: 'Apple'
            }, {
                FruitId: 2,
                Name: 'Mango'
            }, {
                FruitId: 3,
                Name: 'Orange'
            }];
            $scope.GetValue = function () {
                var fruitId = $scope.SelectedFruitId;
                var fruitName;
                for (var i = 0; i < $scope.Fruits.length; i++) {
                    if ($scope.Fruits[i].FruitId == fruitId) {
                        fruitName = $scope.Fruits[i].Name;
                        break;
                    }
                }
                var message = "Value: " + fruitId + " Text: " + fruitName + "\n";
                $window.alert(message);
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-repeat="fruit in Fruits">
            <label for="rbCustomer_{{fruit.FruitId}}">
                <input id="rbCustomer_{{fruit.FruitId}}" type="radio" ng-model="$parent.SelectedFruitId"
                    value="{{fruit.FruitId}}" />
                {{fruit.Name}}
            </label>
        </div>
        <br />
        <br />
        <input type="button" value="Get" ng-click="GetValue()" />
    </div>
</body>
</html>
 
 
Screenshot
AngularJS RadioButtonList example: Populate list of multiple RadioButtons using ng-repeat in AngularJS
 
 
Demo
View Demo
 
 
Downloads