如何修复Angular.js中带内层div的radio单选表单无法互斥选中问题

• 缺少同组name标识：HTML原生单选按钮需要配置相同name属性才能被识别为同一互斥组，未设置时浏览器会将每个单选按钮判定为独立分组，自然支持多选
• 指令绑定语法错误：ng-class、ng-checked等AngularJS内置指令接收的是直接表达式，不需要添加{{}}插值符包裹，错误的插值写法会导致状态绑定失效，无法正常响应状态变更
• 选中状态无全局互斥处理：每个单选按钮独立绑定当前item的checked属性，点击触发的toggle函数未将同组其他选项的checked状态置为false，导致选中状态无法互斥清除

推荐使用AngularJS内置的单选按钮绑定逻辑，无需手动维护互斥状态，修改后的完整代码如下：

<form class="content">
  <div class="inner-content" ng-repeat="item in items">
    <span class="inner-content-name">{{item.name}}</span>
    <input
      class="inner-content-toggle"
      ng-class="item.className"
      type="radio"
      name="contentSelectionGroup"
      ng-value="item.id"
      ng-model="selectedItemId"
      ng-change="toggle(selectedItemId, item.name)"
    />
  </div>
</form>

核心修改点：

• 为所有单选按钮添加相同的name属性，先通过原生HTML规则保证同组互斥
• 移除错误的ng-checked绑定，改用ng-model绑定同一个全局变量selectedItemId，配合ng-value指定每个单选按钮对应的值，AngularJS会自动处理同组选项的互斥选中逻辑，不需要手动维护每个item的checked状态
• 将ng-click替换为ng-change，仅当选中值实际发生变更时才触发回调，避免无效触发
• 修正ng-class的错误插值写法，移除多余的{{}}包裹

如果需要保留原有每个item自带checked属性的实现方案，只需修改toggle函数逻辑，手动实现互斥处理即可：

$scope.toggle = function (targetId, targetName) {
  // 遍历所有选项，仅将当前点击的选项设为选中
  $scope.items.forEach(item => {
    item.checked = item.id === targetId
  })
  // 此处保留你原有的后续业务逻辑
}

同时修改input标签的ng-checked属性为ng-checked="item.checked"，移除插值符。

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