使用嵌套ng中带有单选按钮的ng模型重复不起作用

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

本文关键字:ng 模型 单选按钮 不起作用 嵌套      更新时间:2024-06-21

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

当我给一个ng repeat一个简单的数组时,按钮会正确地显示初始值。但是,如果出现嵌套的ng重复,则只有每个列表的最后一项初始化为值

这是我的钢笔:

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

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

感谢您的帮助。

这里的问题是不能将Angular值插入属性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<输入类型=";文本";name=";{{变量名}}"/>在Angularjs 中