从localStorage取值后Ionic单选按钮未显示选中状态，DOM未更新

我之前也踩过这个坑！核心原因其实很简单：Angular的ng-model在匹配单选按钮时，是基于对象引用的严格相等比较（===），而不是深比较对象的内容。你从localStorage里取出来的对象，哪怕和$scope.multipleBusiness里的对象结构、内容完全一致，它们也是内存中两个独立的对象，引用地址不一样，所以单选按钮没法识别出这是同一个选项，自然就不会显示勾选状态。

下面给你两个最实用的解决方案，按需选择：

方案1：匹配ID获取原数组对象引用 #

既然每个业务对象都有唯一的id，我们可以遍历$scope.multipleBusiness，找到和存储对象id匹配的那个原对象，再赋值给$scope.choice.value：

const savedBiz = localStorageService.get('defaultBusiness');
if (savedBiz) {
  // 从数组中找到对应id的原对象
  $scope.choice.value = $scope.multipleBusiness.find(biz => biz.id === savedBiz.id) || $scope.multipleBusiness[0];
} else {
  $scope.choice.value = $scope.multipleBusiness[0];
}

这样赋值的就是原数组里的对象引用，和单选按钮ng-value绑定的是同一个引用，单选按钮就能正确显示勾选了。

方案2：改用ID作为绑定值（更简洁） #

如果你的业务逻辑不需要在$scope.choice.value里保存完整对象，只需要记录选中的id就够，那可以直接把绑定值改成id（基本类型的比较不会有引用问题）：

调整模板代码： #

<ion-radio ng-repeat="business in multipleBusiness track by business.id" 
           ng-model="choice.selectedId" 
           ng-value="business.id">
  {{business.name}}
</ion-radio>

调整控制器代码： #

const savedBiz = localStorageService.get('defaultBusiness');
if (savedBiz) {
  $scope.choice.selectedId = savedBiz.id;
} else {
  $scope.choice.selectedId = $scope.multipleBusiness[0].id;
}

这种方式不仅解决了勾选问题，还能减少localStorage的存储体积（甚至可以只存id而不是整个对象），逻辑也更简单。

为什么控制台输出看起来一样？ #

因为控制台打印对象时，显示的是对象的内容，不会显示内存引用地址，所以你看起来两个对象完全一致，但实际上它们是不同的引用，这就是问题的关键~

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