1

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)

        }
      ]);
Sudhakar
  • 2,904
  • 8
  • 33
  • 47
  • 1
    possible duplicate of [AngularJs: How to set radio button checked based on model](http://stackoverflow.com/questions/14530785/angularjs-how-to-set-radio-button-checked-based-on-model) – joragupra Jul 01 '15 at 15:44

5 Answers5

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

Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92
  • 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 – Sudhakar Mar 11 '15 at 07:11
  • 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 http://plnkr.co/edit/pOzHeDvqz32qIxBGexvL?p=preview :) – Kalhan.Toress Mar 11 '15 at 07:21
  • Here, you deserve a cookie! – Th3B0Y Aug 31 '16 at 01:19
4
<input type="checkbox" id="rempass" ng-model="rememberMe" ng-checked="rememberMeUserInfoCheck()" >  $scope.rememberMeUserInfoCheck=function() { return true; }

this works for me

Dinesh Jain
  • 149
  • 11
3

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

`<input type="radio" ng-model="modelName" name="radioName" value="value1" ng-checked="true">`
Sibi
  • 31
  • 3
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

Jony-Y
  • 1,579
  • 1
  • 13
  • 30
0

For those working with FormGroup and FormControl:

In the template:

  1. Add formControlName = sameNameforAllRadioButtonsOfAChoice as an attribute to your radio button input tags.
  2. 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:

  1. 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:

  1. import { FormControl, FormGroup, Validators } from '@angular/forms';
  2. myForm = new FormGroup({sameNameforAllRadioButtonsOfAChoice: new FormControl('false', [Validators.required])})
MikhailRatner
  • 452
  • 6
  • 13