AngularJS - Radio button not checked

Question

I have an ng-repeat with a bunch of radio buttons inside:

<div class="panel panel-default" ng-repeat="offer in vm.offerList">
    ...    
    <td ng-show="offer.edit">
        <div class="row">                        
            <input type="radio" name="before" ng-model="offer.before" value="false">
            <input type="radio" name="before" ng-model="offer.before" value="true">
       </div>
   </td>
   ...
</div>

The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.

This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/

Pankaj Parkar · Accepted Answer · 2017-02-03 16:48:24Z

10

Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).

Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.

Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.

Markup

<div class="row">
    {{offer.before}}
    <input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
    <input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>

Forked Fiddle

edited Feb 3, 2017 at 16:48

answered Feb 3, 2017 at 16:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

11 Comments

Pankaj Parkar Over a year ago

@ChiefTwoPencils I updated answer with OP's fiddle.. Though thanks for heads up :)

mramosch Over a year ago

Why for example is this working perfectly but it doesn’t when the type=‘radio’ ??? <input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'>

Pankaj Parkar Over a year ago

Can you please share a fiddle/plunkr?

mramosch Over a year ago

w3schools.com/code/tryit.asp?filename=GLX33M4EPJAC

Pankaj Parkar Over a year ago

What is the issue, I tried it, but can not figure what issue you're facing. Can you please elaborate more on it? w3schools.com/code/tryit.asp?filename=GLX41P26BSR2

|

Collectives™ on Stack Overflow

AngularJS - Radio button not checked

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related