AngularJS中多单选按钮组选中值无法保留的解决方法

这个问题的核心原因很直白：你所有的单选按钮都共用了同一个name="radioButtonName"属性。浏览器会把拥有相同name值的单选按钮判定为同一组，所以当你选中另一组的选项时，浏览器会自动取消同name组里之前选中的选项。

要解决这个问题，只需要给每个单选按钮组设置唯一的name属性，并把选中值绑定到每组独立的变量上，具体操作如下：

1. 调整数据结构（给每组加唯一标识） #

首先，假设你的单选按钮组数据是一个包含多个组的数组，每个组需要有自己的唯一ID（用来生成唯一name）和存储选中值的属性。比如：

// 示例数据结构，可根据你的实际业务调整
$scope.radioGroups = [
  {
    groupId: "genderGroup", // 组的唯一标识
    label: "单选按钮组1",
    Values: [
      { Id: "male", Value: "Male" },
      { Id: "female", Value: "Female" }
    ],
    selectedValue: "" // 专门存储该组的选中值
  },
  {
    groupId: "codeGroup",
    label: "单选按钮组2",
    Values: [
      { Id: "ax", Value: "ax" },
      { Id: "sy", Value: "sy" }
    ],
    selectedValue: ""
  },
  {
    groupId: "letterGroup",
    label: "单选按钮组3",
    Values: [
      { Id: "c", Value: "c" },
      { Id: "v", Value: "v" }
    ],
    selectedValue: ""
  }
];

2. 修改HTML模板 #

把name属性动态绑定到每组的唯一ID上，同时把ng-model绑定到组的selectedValue属性，这样每组的选中状态就完全独立了：

<div ng-repeat="radioGroup in radioGroups">
  <strong>{{radioGroup.label}}:</strong>
  <span ng-repeat="radioButtonItem in radioGroup.Values">
    <label class="radio-inline">
      <input 
        type="radio" 
        name="{{radioGroup.groupId}}" <!-- 动态生成唯一的组名称 -->
        value="{{radioButtonItem.Id}}" 
        ng-model="radioGroup.selectedValue" <!-- 绑定到组级别的选中值变量 -->
        ng-change="changeRadioButton(radioGroup)" <!-- 可选：把当前组传入回调方便处理 -->
      /> 
      {{radioButtonItem.Value}}
    </label>
  </span>
</div>

3. 调整回调函数（如果需要） #

如果你的changeRadioButton函数需要处理选中后的逻辑，可以把当前组作为参数传进去，方便获取该组的选中值：

$scope.changeRadioButton = function(radioGroup) {
  console.log(`组 ${radioGroup.groupId} 选中了：${radioGroup.selectedValue}`);
  // 这里可以添加你的业务逻辑
};

关键注意事项 #

• 唯一的name属性：这是浏览器区分不同单选按钮组的核心，必须保证每组的name不重复，用组的唯一ID生成是最稳妥的方式。
• 独立的ng-model绑定：不要把选中值绑定到每个选项的属性上，绑定到组级别的属性才能确保每组的选中值不会互相覆盖。
• 避免原型继承问题：如果你的数据是从父作用域继承来的，确保绑定的变量是对象的属性（而非原始值），这样Angular的双向绑定才能正常生效。

这样修改后，每组单选按钮的选中状态就会独立保存，不会出现选中第二组就取消第一组的情况了。

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