AngularJS - 未选中单选按钮

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/

Answer 1

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