How to pre-select radio buttons in angularjs

Question

When my model value is true then I want the radio buttons to be selected when loaded, but its happening the otherway around. All false models are getting selected. How do fix this.

http://plnkr.co/edit/DIYm4vBM3srdS61K6EPA?p=preview

angular.module('radioExample', [])
      .controller('ExampleController', ['$scope',
        function($scope) {
          $scope.kind = [{
            name: 'task',
            selected: false
          }, {
            name: 'bug',
            selected: false
          }, {
            name: 'other',
            selected: true
          }, {
            name: 'rfe',
            selected: false
          }]
          $scope.$watch('kind', function() {
            console.log('changed', JSON.stringify($scope.kind, null, 2))
          }, true)

        }
      ]);

possible duplicate of AngularJs: How to set radio button checked based on model — joragupra
– joragupra, Commented Jul 1, 2015 at 15:44

Kalhan · Accepted Answer · 2015-03-11 06:59:47Z

10

use ng-value here is the doc for angular radio

<input type="radio" name="" id="" value="" ng-model="k.selected" ng-value="true" />

then, if the ng-value is true and the model value is also true then check box will checked

here is the update Demo

answered Mar 11, 2015 at 6:59

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sudhakar Over a year ago

yes this works! Is there a setting to toggle the selection? Because right now it it selects more than one radio button at once, I need to be able to select only one option a time

Kalhan Over a year ago

glad to help you , :) and if you want to select only one radio then you have to use same model for each radio buttons, in your case there are different models for each and every radio buttons, but you can do something like this plnkr.co/edit/pOzHeDvqz32qIxBGexvL?p=preview :)

Th3B0Y Over a year ago

Here, you deserve a cookie!

Dinesh Jain · Accepted Answer · 2015-09-26 06:17:21Z

4

<input type="checkbox" id="rempass" ng-model="rememberMe" ng-checked="rememberMeUserInfoCheck()" >  $scope.rememberMeUserInfoCheck=function() { return true; }

this works for me

edited Sep 26, 2015 at 6:17

answered Sep 21, 2015 at 20:29

Dinesh Jain

1491 silver badge11 bronze badges

3 Comments

Enamul Hassan Over a year ago

can you please elaborate?

Dinesh Jain Over a year ago

<input type="checkbox" id="rempass" ng-model="rememberMe" ng-checked="rememberMeUserInfoCheck()" > $scope.rememberMeUserInfoCheck=function() { return true; } this works for me

Dinesh Jain Over a year ago

sorry guys my mistake

Sibi · Accepted Answer · 2017-03-10 12:05:57Z

3

Add ng-checked ="true" to your radio input field

`<input type="radio" ng-model="modelName" name="radioName" value="value1" ng-checked="true">`

edited Mar 10, 2017 at 12:05

answered Mar 10, 2017 at 11:54

Sibi

313 bronze badges

1 Comment

Agorreca Over a year ago

This is the only thing that works for me. Not ng-model nor ng-value.

Jony-Y · Accepted Answer · 2015-03-11 07:03:56Z

1

I fixed the plunker plunker

 <form name="myForm" ng-controller="ExampleController">
    <br />all 'false' radio buttons are selected when 'value' is used -------------
    <br />
    <div ng-repeat="k in kind">
      <input type="radio" name="" id="" value="" ng-model="!k.selected" value="k.selected" />{{k.name}}
    </div>
    <br />all radio buttons are selected when 'ng-value' is used -------------
    <br />
    <div ng-repeat="k in kind">
      <input type="radio" name="" id="" value="" ng-model="k.selected" ng-value="k.selected" />{{k.name}}
    </div>
</form>

you had it right.... just needed to add a ! so the model will take the opposite of the scope value... since you are using them for both I guess its wont hurt your code

answered Mar 11, 2015 at 7:03

Jony-Y

1,5791 gold badge13 silver badges31 bronze badges

1 Comment

Sudhakar Over a year ago

Thanks for the response Jony

MikhailRatner · Accepted Answer · 2021-12-07 09:29:58Z

For those working with `FormGroup` and `FormControl`:

In the template:

Add formControlName = sameNameforAllRadioButtonsOfAChoice as an attribute to your radio button input tags.
Also add value = "true" and value = "false" (you can also do it with numbers and strings, but I will continue with boolean).

In the component:

Add the name, e.g. sameNameforAllRadioButtonsOfAChoice, to your FormGroup:

myForm = new FormGroup({sameNameforAllRadioButtonsOfAChoice: new FormControl('false')})

This sets the default value to false. In the FormControl, be careful to write it as a string!

BONUS - If you need Validation:

import { FormControl, FormGroup, Validators } from '@angular/forms';
myForm = new FormGroup({sameNameforAllRadioButtonsOfAChoice: new FormControl('false', [Validators.required])})

Collectives™ on Stack Overflow

How to pre-select radio buttons in angularjs

5 Answers 5

3 Comments

3 Comments

1 Comment

1 Comment

For those working with `FormGroup` and `FormControl`:

In the template:

In the component:

BONUS - If you need Validation:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

1 Comment

1 Comment

For those working with FormGroup and FormControl:

In the template:

In the component:

BONUS - If you need Validation:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

For those working with `FormGroup` and `FormControl`: