Selected value in radio button group not retained in angularjs

Question

I have radio button group in my angular page. Below is my code,

<span ng-repeat="radioButtonItem in radioButtonItem.Values">
    <label class="radio-inline">
        <input type="radio"
               name="radioButtonName"
               value="{{radioButtonItem.Id}}"
               ng-model="radioButtonItem.SelectedValues"
               ng-change="changeRadioButton()" />
        {{radioButtonItem.Value}} 
    </label>

</span>

 Ex :
      Radio button 1 : .Male .Female
      Radio button 2 : .ax .sy
      Radio button 3 : .c .v

when i select the first group radio button say male and select the second group radio button say ax first one is deselect(male). How to retain the values in radio button group?

score 1 · Answer 1 · edited Mar 28 '19 at 16:03

Because your name is same for all the groups. Generate it dynamically too.

Here is how you could do it. I have attached an example too.

 <input type="radio"
        name="{{radioButtonItem.groupName}}"
        value="{{radioButtonItem.Id}}"
        ng-model="radioButtonItem.SelectedValues"
        ng-change="changeRadioButton()"/>

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.cell = {
        evaluator: "Guava2"
    };
    $scope.cell1 = {
        evaluator: "Apple1"
    };
    $scope.evaluators = [{
        name: "Guava1",
        groupName: "guava"
    }, {
        name: "Guava2",
        groupName: "guava"
    }];
    $scope.evaluators1 = [{
        name: "Apple1",
        groupName: "peachy"
    }, {
        name: "Peach2",
        groupName: "peachy"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body>
<div ng-app="myApp">
    <div ng-controller="myController">
        <div>Which one?</div>
        <label class="radio" ng-repeat="eval in evaluators">
            <input type="radio" ng-model="cell.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
        </label>
            <hr />
        <div>You picked: {{cell.evaluator}}</div>
        
        <br/>
        
        <label class="radio" ng-repeat="eval in evaluators1">
            <input type="radio" ng-model="cell1.evaluator" name="{{eval.groupName}}" value="{{eval.name}}">{{eval.name}}
        </label>
        <div>You picked: {{cell1.evaluator}}</div>

    </div>
</div>
</body>
</html>

I am glad it helped you, You are welcome. Don't forget to accept it as answer to close your question @Marsh :) — Hey24sheep, Jan 23 '18 at 14:43

Selected value in radio button group not retained in angularjs

1 Answers1

Linked