using ng-model with radio buttons inside nested ng-repeat not working

Question

Hey i'm trying to display a list of radio buttons inside an ng-repeat and it doesn't seem to be taking in the initial values of the fields i bind to ng-model on the input.

When i give a simple array to an ng-repeat, the buttons are displayed with the initial values properly. But if a nested ng-repeat comes into the picture, only the last item of each list initializes with a value

Here's my pen:

https://codepen.io/alokraop/pen/JXLZBp

I have no idea where i'm going wrong. I'm making sure that the name attribute of the radio button is unique to each group.

Appreciate the help.

thanks for asking this question :) – kapilpatwa93 Feb 24 '17 at 10:31 — kapilpatwa93, Feb 24 '17 at 10:31

score 7 · Accepted Answer · edited May 23 '17 at 12:16

7

The issue here is that you can't interpolate an Angular value into the attr name. If we remove the name attr from our HTML, we get the expected result. See Below.

<div ng-app="sample">
  <div ng-controller="sampleController as sample">
    Single ng-repeat:
    <div ng-repeat="queue in sample.queues">{{queue.name}} status:
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
      <input type="radio" name="queue-{{$index}}"  ng-model="queue.condition" value="partial" /> partial
    </div>
    <br />
    Nested ng-repeat:
    <div ng-repeat="qm in sample.qms">
      {{qm.name}} queues:
      <div ng-repeat="queue in qm.queues">{{queue.name}} status:
        <input type="radio" ng-model="queue.condition" value="hooked" /> hooked
        <input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
        <input type="radio" ng-model="queue.condition" value="partial" /> partial
      </div>
    </div>
  </div>

</div>

If we want to include a name dynamically, look into an Angular name directive such as: Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs

edited May 23 '17 at 12:16

Community

1
1

answered Apr 14 '16 at 16:25

dYale

1,541
1
16
19

Hey thanks, that fixed it. But i don't get how that would only bind the correct value to the last item in the list though. Plus the name attribute is what groups the radio buttons together right? How do the radio buttons still know to uncheck a previously selected item when i select a different item without the name attribute? Is it the broswer kinda deducing that three of them are in one group coz they're in sequence? – alokraop Apr 14 '16 at 17:06
The radio buttons, in this case, are bound together by the ng-model directive. When a user select a new radio option, the value of ng-model changes to the value attribute associated with that radio. When this happens, the ng-model is reread by the other radio buttons that share that ng-model and update their value accordingly. – dYale Apr 14 '16 at 17:15
Oh so it happens in the digest cycle now since native html events have no idea that the buttons are part of a group. Thanks :-) – alokraop Apr 14 '16 at 18:38
1

really useful for me. Tried many way to solve this problem. but only this one work – Upalr Aug 24 '17 at 13:50

using ng-model with radio buttons inside nested ng-repeat not working

1 Answers1