使用ng-model与嵌套ng-repeat内的单选按钮不起作用

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.

Answer 1

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