CODEWITHSUNDEEP
angularjs
Marsh
Marsh

Reputation: 173

Selected value in radio button group not retained in angularjs

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?

Upvotes: 0

Views: 418

Answers (1)

Hey24sheep
Hey24sheep

Reputation: 1202

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>

Upvotes: 1

Related Questions