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

Question

嘿我正在尝试在ng-repeat中显示单选按钮列表，它似乎没有考虑我在输入上绑定到ng-model的字段的初始值。

当我给ng-repeat一个简单的数组时，按钮会正确显示初始值。 但是如果嵌套的ng-repeat进入图片，则只有每个列表的最后一项用值初始化

这是我的笔：

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

我不知道我哪里出错了。 我确保单选按钮的name属性对每个组都是唯一的。

感谢帮助。

Answer 1

这里的问题是您不能将Angular值插入到attr name 。 如果我们从HTML中删除名称attr，我们会得到预期的结果。 见下文。

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

如果我们想要动态包含名称，请查看Angular名称指令，例如： Angularjs中的动态表单名称属性<input type =“text”name =“{{variable-name}}”/>