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

时间:2016-04-14 16:03:12

标签: javascript angularjs angularjs-ng-repeat

嘿,我试图在ng-repeat中显示一个单选按钮列表,它似乎没有接受我在输入上绑定到ng-model的字段的初始值。

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

初始化

这是我的笔:

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

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

感谢帮助。

1 个答案:

答案 0 :(得分:6)

此处的问题是您无法将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名称指令,例如:Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs