Angular中点击其他单选按钮时如何重置至默认选中项？

现有3个单选按钮，默认选中第一个。要求点击第二个或第三个单选按钮时，自动重置为选中第一个，但当前代码存在语法错误和逻辑问题，无法实现需求。

你的尝试代码（存在问题）： #

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', function (scope) {

scope.uncheck = function (event) {

if (scope.checked event.target.value) scope.checked = false ==

}

}

问题分析： #

1. 代码存在明显语法错误：if条件缺少比较运算符，赋值语句scope.checked = false ==逻辑混乱，无实际意义
2. 未正确使用Angular的ng-model绑定单选按钮选中状态，重置逻辑完全错误

正确实现方案： #

HTML结构：

<div ng-app="app" ng-controller="MainCtrl">
  <label>
    <input type="radio" ng-model="selectedOption" value="option1"/> 选项1
  </label>
  <label>
    <input type="radio" ng-model="selectedOption" value="option2" ng-click="resetToDefault()"/> 选项2
  </label>
  <label>
    <input type="radio" ng-model="selectedOption" value="option3" ng-click="resetToDefault()"/> 选项3
  </label>
</div>

JavaScript逻辑：

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  // 默认选中第一个选项
  $scope.selectedOption = 'option1';

  $scope.resetToDefault = function() {
    // 用$timeout确保Angular完成当前digest周期后再重置，保证视图同步
    $timeout(function() {
      $scope.selectedOption = 'option1';
    }, 0);
  };
}]);

实现说明： #

• 用ng-model统一绑定所有单选按钮的选中状态，默认值设为第一个选项的value
• 给第二个、第三个单选按钮绑定ng-click事件，触发重置函数
• 使用$timeout是因为单选按钮点击后Angular会先更新ng-model，我们需要等待这个更新完成后再强制重置，确保视图能正确回显第一个选中的状态

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