求助：单个ng-repeat内多单选按钮组功能异常问题

嘿，这个问题我之前做表单联动的时候也踩过坑！你遇到的核心问题其实是单选按钮的模型绑定或者name属性没按组正确隔离，导致所有单选按钮共享了同一个“作用域”，才会出现选一个就取消其他所有的情况。下面给你拆解两种最常见的原因和对应的解决办法：

1. 模型变量没有按父组隔离 #

如果所有子单选按钮都绑定到同一个全局的$scope变量（比如ng-model="selectedOption"），那不管你name设得再不一样，AngularJS都会把它们当成同一组来处理——因为模型是共享的。

正确的做法是把每个父复选框对应的子单选模型，绑定到父项对象自己的属性上。比如你的父项数据是一个数组，每个父项都有自己的selectedChild属性：

// 控制器里的示例数据
$scope.parentItems = [
  { id: 1, name: "父选项1", isChecked: false, selectedChild: null, children: [{id:11, name:"子项1-1"}, {id:12, name:"子项1-2"}] },
  { id: 2, name: "父选项2", isChecked: false, selectedChild: null, children: [{id:21, name:"子项2-1"}, {id:22, name:"子项2-2"}] }
];

然后在模板里，子单选的ng-model绑定到当前父项的selectedChild：

<div ng-repeat="parent in parentItems">
  <label>
    <input type="checkbox" ng-model="parent.isChecked"> {{parent.name}}
  </label>
  <!-- 只有父复选框选中时才显示子单选 -->
  <div ng-if="parent.isChecked" class="child-options">
    <label ng-repeat="child in parent.children">
      <input type="radio" 
             ng-model="parent.selectedChild" 
             ng-value="child"> {{child.name}}
    </label>
  </div>
</div>

这样每个父组的单选按钮都绑定到自己父项的模型，自然只会在组内互斥。

2. 动态生成的name属性未正确分组 #

虽然你觉得name属性不一样，但有时候AngularJS编译模板时，动态生成的name可能因为表达式错误导致重复（比如没用到父项的唯一标识）。这时候可以用ng-attr-name来确保每个组的name是唯一的：

<input type="radio" 
       ng-attr-name="'child-group-' + parent.id" 
       ng-model="parent.selectedChildId" 
       ng-value="child.id">

这里parent.id是每个父项的唯一标识，生成的name会是child-group-1、child-group-2这样的唯一值，浏览器会根据name属性来识别单选组，确保组内互斥。

最后排查小技巧 #

如果还是有问题，打开浏览器开发者工具（F12），查看渲染后的DOM结构，检查每个单选按钮的name属性是不是真的按组区分开了，同时看ng-model绑定的变量是不是每个父组独立的——很多时候问题就出在这两个地方的小疏漏上。

内容的提问来源于stack exchange，提问作者MattE