如何在AngularJS中为单选按钮实现自动保存功能？

我来帮你搞定这个单选按钮自动保存失效的问题！你遇到的核心问题出在两个地方：ng-checked和ng-model的冲突，以及单选按钮值的类型不匹配，咱们一步步来修正：

1. 修正单选按钮的HTML代码 #

首先，AngularJS的单选按钮完全不需要ng-checked指令——ng-model已经能自动控制选中状态了，混用两者反而会破坏双向绑定。另外，直接用value="true"会把值当成字符串，而你需要的是布尔值，得换成ng-value来绑定布尔类型的值。

修正后的HTML应该是这样的：

<label>
  <input type="radio" ng-model="user.gender" ng-value="true" ng-change="save()" />
  Male
</label>
<label>
  <input type="radio" ng-model="user.gender" ng-value="false" ng-change="save()" />
  Female
</label>

（注意你之前的代码里把Female和true绑定了，这应该是笔误吧？我这里调整成Male对应true，Female对应false，符合你说的默认选中Male的需求）

2. 完善save函数和初始化逻辑 #

接下来，你的save函数需要把user对象转换成字符串存入sessionStorage（因为sessionStorage只能存储字符串），然后在页面加载时从sessionStorage恢复数据：

在你的AngularJS控制器里添加以下代码：

angular.module('yourAppName').controller('YourController', function($scope) {
  // 页面初始化时恢复数据
  var savedUser = sessionStorage.getItem('formData');
  if (savedUser) {
    $scope.user = JSON.parse(savedUser);
  } else {
    // 默认值：选中Male（gender为true）
    $scope.user = { gender: true };
  }

  // 保存表单数据到sessionStorage
  $scope.save = function() {
    sessionStorage.setItem('formData', JSON.stringify($scope.user));
  };
});

为什么之前的代码不工作？ #

• ng-checked的干扰：ng-checked是单向绑定，它会根据表达式强制设置选中状态，但ng-model是双向绑定，两者同时存在时会出现状态不同步的问题。
• 值类型不匹配：直接用value="true"会让user.gender得到字符串"true"，而不是布尔值true。当你从sessionStorage取出数据时，解析出来的也是字符串，这时候和布尔值比较就会出错，导致单选按钮无法正确选中。

这样调整之后，单选按钮的状态就能和sessionStorage同步，刷新页面也能正确恢复啦！

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