javascript - AngularJS - Radio button not checked - Stack Overflow

admin管理员组

文章数量:1353610

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: /

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/danielrvt/dpoLdgjq/

• javascript
• html
• angularjs
• radio-button

Share Improve this question Follow edited Feb 3, 2017 at 16:41 danielrvt asked Feb 3, 2017 at 16:32 danielrvtdanielrvt 10.9k2121 gold badges8484 silver badges129129 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptAngularJSRadio button not checkedStack Overflow