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/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With