在嵌套的 ng-repeat 中使用带有单选按钮的 ng-model 不起作用答案

【问题标题】：using ng-model with radio buttons inside nested ng-repeat not working在嵌套的 ng-repeat 中使用带有单选按钮的 ng-model 不起作用
【发布时间】：2016-08-06 07:33:24
【问题描述】：

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

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

这是我的笔：

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

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

感谢您的帮助。

【问题讨论】：

感谢您提出这个问题 :)

标签： javascript angularjs angularjs-ng-repeat

【解决方案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 名称指令，例如：Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs

【讨论】：

嘿，谢谢，解决了。但我不明白这只会将正确的值绑定到列表中的最后一项。加上名称属性是什么将单选按钮组合在一起，对吗？当我选择没有名称属性的其他项目时，单选按钮如何仍然知道取消选中以前选择的项目？是不是因为他们是按顺序排列的，所以他们中的三个人在一组？
单选按钮，在这种情况下，由 ng-model 指令绑定在一起。当用户选择新的单选选项时，ng-model 的值会更改为与该单选关联的 value 属性。发生这种情况时，共享该 ng-model 的其他单选按钮会重新读取 ng-model 并相应地更新其值。
哦，所以它现在发生在摘要循环中，因为本机 html 事件不知道按钮是组的一部分。谢谢:-)
对我真的很有用。尝试了很多方法来解决这个问题。但只有这一项工作