AngularJS中radio的checked属性与ng-model共存时预选中失效问题

这是因为AngularJS的ng-model会完全接管表单控件的状态，原生的checked属性在绑定了ng-model的情况下会被直接忽略。AngularJS是数据驱动的框架，控件的选中状态完全由绑定的模型值决定，而不是原生DOM属性。

当你给radio加上ng-model="tracking"后，Angular会持续监控$scope.tracking的值，自动将匹配该值的radio设为选中状态。此时原生的checked属性就失去了作用——框架会优先使用模型数据来控制控件状态，不会再读取原生属性的设置。

正确的解决方案：初始化模型值代替checked属性 #

你不需要依赖checked属性，而是在控制器中直接初始化ng-model对应的变量为目标radio的value值即可：

示例代码 #

HTML部分

<div ng-app="myApp" ng-controller="myController">
  <input type="radio" name="trackingOption" ng-model="tracking" id="trackingOptionYes" value="1"> Yes
  <input type="radio" name="trackingOption" ng-model="tracking" id="trackingOptionNo" value="0"> No
</div>

JavaScript控制器部分

angular.module('myApp', [])
.controller('myController', function($scope) {
  // 初始化模型值为"0"，对应"No"选项的value
  $scope.tracking = "0";
});

注意点：保持值的类型一致 #

要确保模型值的类型和radio的value类型完全匹配：

• 如果radio的value是字符串（比如value="0"），模型值也要设为字符串"0"
• 如果radio的value是数字（比如用插值表达式value="{{0}}"），模型值就要设为数字0

这样Angular才能正确匹配并选中对应的radio选项。

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