Make radio checked by default when it has object as ng-value

Question

I have a scoped object in my controller which sets some default values in my app, like this:

  //set default values for form
  $scope.appText = {
    'size':'normal',
    'colour':'green',
    'alignment':'top',
    'dimensions':{
      'width':600,
      'height':300
    }
  };

In my view I have a series of HTML radio buttons, each with an ng-value which has an object with a width and a height, like so:

<input type="radio" name="radio-dimensions" ng-value="{width:600, height:300}" ng-model="appText.dimensions" checked>600x300

<input type="radio" name="radio-dimensions" ng-value="{width:300, height:250}" ng-model="appText.dimensions">300x250

I can't make the first radio button be checked by default, even though its ng-value matches the model.

How do I make it checked by default? I've tried adding

ng-checked="true"

which doesn't work, and I don't think is recommended. This jsfiddle illustrates the problem:

https://jsfiddle.net/yod71dm8/1/

In this jsfiddle ng-checked works. Maybe this can help you: stackoverflow.com/questions/14530785/… — Dimitar Popov
– Dimitar Popov, Commented Mar 13, 2016 at 23:04
checked doesn't work in angular, you need to mention $parent.somevariable in ng-model to get radio button selected — user2881430
– user2881430, Commented Mar 13, 2016 at 23:53

Tik · Accepted Answer · 2016-03-13 23:20:21Z

1

your ng-model needs to reference something that is a boolean value ie. either true or false for a radio button or checkbox.

so in your controller you would have $scope.radio1 = true

then in your view

<input type="radio" name="radio-dimensions" ng-model="radio1">600x300

answered Mar 13, 2016 at 23:20

Tik

8826 silver badges14 bronze badges

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

Comments

dave · Accepted Answer · 2016-03-14 08:41:50Z

0

ng-checked="true" does work. My issue was that the radio buttons were inside an ng-if statement. Changing ng-if to ng-show fixed the issue.

edited Mar 14, 2016 at 8:41

answered Mar 13, 2016 at 23:53

dave

2,9201 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Make radio checked by default when it has object as ng-value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related