AngularJS 1.5.0嵌套ng-repeat单选按钮初始化选中异常问题

问题回顾 #

基于AngularJS 1.5.0开发，用嵌套ng-repeat（依赖$index和$parent.$index）生成带动态name属性的单选按钮组时，出现第一组单选无法正常选中的问题——选中第二组的选项后，第一组的选中状态会被取消。排查后确认是动态name属性解析晚于checked属性设置，导致渲染初期所有单选按钮临时共用同一个名称，浏览器的单选互斥逻辑提前触发，干扰了预期的分组选中行为。

之前尝试的方案都有局限：

• 省略name属性：能避免互斥问题，但失去了表单校验、序列化等原生表单功能，不符合业务需求。
• 为每组单选嵌套独立<form>标签：解决了分组互斥，但增加DOM层级，多表单结构可能和现有页面逻辑冲突，维护成本高。

可行解决方案 #

方案1：用ng-attr-name替代原生name #

AngularJS的ng-attr-*指令会等表达式解析完成后再渲染属性，能确保动态name在checked属性设置前就生效，从根源避免临时同名问题。

示例代码：

<div ng-repeat="group in groups" ng-init="groupIndex = $index">
  <div ng-repeat="option in group.options">
    <input 
      type="radio" 
      ng-attr-name="radio-group-{{groupIndex}}" 
      ng-model="group.selectedValue" 
      ng-value="option.value"
    >
    {{option.label}}
  </div>
</div>

这里用ng-attr-name绑定动态表达式，保证name属性在DOM渲染时已经是正确的分组名称，浏览器的单选互斥逻辑会基于最终的name值生效，不会出现跨组干扰。

方案2：封装自定义单选分组指令 #

如果项目里多处需要类似的嵌套单选分组，可以封装自定义指令，内部处理分组逻辑，既避免重复代码，又解决动态name的时序问题。

示例代码：

angular.module('myApp').directive('radioGroup', function() {
  return {
    scope: {
      groupModel: '=',
      options: '<'
    },
    template: `
      <div ng-repeat="option in options">
        <input 
          type="radio" 
          name="{{::$id + '-radio'}}" 
          ng-model="groupModel" 
          ng-value="option.value"
        >
        {{option.label}}
      </div>
    `
  };
});

使用方式：

<div ng-repeat="group in groups">
  <radio-group 
    group-model="group.selectedValue" 
    options="group.options"
  ></radio-group>
</div>

这种方式利用指令独立作用域的$id生成唯一的name值，既保证分组独立，又不用依赖$index和$parent.$index，避免了嵌套循环的索引依赖问题。

方案3：加track by优化ng-repeat渲染 #

在嵌套ng-repeat里添加track by表达式，让AngularJS更高效地追踪DOM元素，减少渲染时序问题的概率，配合ng-attr-name使用效果更好。

示例代码：

<div ng-repeat="group in groups track by group.id" ng-init="groupIndex = $index">
  <div ng-repeat="option in group.options track by option.id">
    <input 
      type="radio" 
      ng-attr-name="radio-group-{{groupIndex}}" 
      ng-model="group.selectedValue" 
      ng-value="option.value"
    >
    {{option.label}}
  </div>
</div>

track by能让AngularJS在渲染时精准关联数据与DOM元素，减少不必要的DOM重排，间接降低动态属性解析时序冲突的可能性。

总结 #

优先选方案1（ng-attr-name），实现简单且不改动现有DOM结构，直接解决动态name解析时序问题；如果项目多处有类似场景，**方案2（自定义指令）**更利于代码复用和维护；方案3可以作为辅助优化手段，配合前两种方案使用。

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