Radio button checked by default when using ng-repeat

Question

I have been wanting to have a radio button checked out of a list of radio buttons that I present in the screen using ng-repeat, but my code does not work. This is what I am doing:

<div class="clubRole" data-ng-if="club.checked">
    <div data-ng-repeat="role in securityGroups.slice(0,1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
    </div>
    <div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
    </div>      
</div>

The intention of the code is to get the first radio button checked, and the others unchecked. That code has a problem: it does not work. But at least it gives the idea of what I am trying to do: I want one of the radio buttons checked by default, no matter which one it is.

Yearly

you should use data-ng-model="$parent.club.role" because you used ng-if – Obstruent

@pankajparkar, I believe it's ng-repeat that creates its own scope, not ng-if – Entertainer

@Entertainer ng-if also creates a new scope, you need to look at docs.angularjs.org/api/ng/directive/ngIf – Obstruent

Answer 1

Radio button will be check if the value of the input attribute is equal to the value of modal applied on the radio button.

 <div ng-repeat="val in ['a','b','c']">
     <input
            type="radio"
            name="val"
            data-ng-model="role" 
            data-ng-value="val"
            ng-init="$index==0?(role=val):''"
      />
     {{val}}
 </div>

Checked="checked" will not work in angular context. You can either set the value of radio button explicitly in controller or you can manage it in the view itself as i did in the above example.But the modal should be equate according to the value attribute on the inmput element.

For example if modal is x on three radio button's and each radio button have different value like a,b and c. then x must be equal to any of the value to be checked.

Plunker

Mita

Answer 2

You don't need to worry about checked.

HTML:

<div ng-app="app">
<div ng-controller="mainController">
    <label ng-repeat="option in options">
        <input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}}
    </label>
</div>
</div>

JavaScript:

var appModule = angular.module('app', []);

appModule.controller('mainController', function($scope) {

$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];

});

Working fiddle here: https://jsfiddle.net/qnw8ogrk/1/

Isreal

Answer 3

You don't need checked="checked", I think angular will take care of it itself if you set the model to one of the values. Something like:

club.role = securityGroups.slice(0,1)[0].securityGroupCode;

Also, the scope may trip you up here, the model may have to be $parent.club.role

Entertainer

Answer 4

if you use a primitive type in list, the answer of bm1729 is correct, but if you use objects in the list, then look this example: https://jsfiddle.net/9chd58mk/2/

the first part is bad, because the selected object is look like same with a list item, but it doesn't same by reference. the == operator is false in this case

$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];

but the second and third examples are use the list item reference, and the radio button checked. the == operator is true in this case

$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];

Cerelly

Answer 5

  <md-radio-group ng-model="data.group3">
                                                    <md-radio-button value="{{o._id}}" class="md-primary" ng-repeat="o in lstDataRecord" ng-click="updTemplateId(o._id)">
                                                        <div flex-gt-sm="50" style="height: 150px; width: 250px;">
                                                            <img src="{{PageInfo_PATH}}{{o.imgUrl}}" />
                                                            {{o.displayName}}
                                                        </div>
                                                    </md-radio-button>
                                                    <md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
                                                </md-radio-group>

Deathtrap

Your answer is only code. Please improve it with some explanations. – Perales