Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS - Radio button not checked

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/

like image 494
danielrvt Avatar asked Feb 05 '23 04:02

danielrvt


1 Answers

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

like image 153
Pankaj Parkar Avatar answered Feb 07 '23 17:02

Pankaj Parkar