Angular中单选框选中时ng-change事件未触发问题求助

问题根源 #

你当前的单选框用插值语法{{role.RoleId}}绑定value属性，这种方式会让Angular无法正确跟踪值的动态变化，导致ng-change仅在初始加载时触发，后续切换选项时无法响应。另外，如果vm.SelectedRoleId的类型和role.RoleId不匹配（比如一个是数字、一个是字符串），也会造成模型与单选框选中状态不同步，引发触发异常。

解决方案 #

1. 替换value为ng-value
   把单选框的value="{{role.RoleId}}"改成ng-value="role.RoleId"，ng-value是Angular专门用于动态绑定表单控件值的指令，能确保值和模型实时同步。

2. 保证模型类型匹配
   在控制器里初始化vm.SelectedRoleId时，要确保它的类型和role.RoleId一致（比如同为数字或字符串）。

修正后的代码 #

HTML部分

<div ng-app="test">
  <div ng-controller="userModifyController as vm" ng-cloak>
    <!-- 假设这是ng-repeat循环内的行元素 -->
    <td width="5%" align="center">
        <input type="radio" 
               ng-model="vm.SelectedRoleId" 
               name="roleRadio" 
               ng-value="role.RoleId"
               required="required" 
               ng-change="vm.LoadStoreAttributesDetails()"/>
    </td>
  </div>
</div>

控制器部分

// 初始化时保证类型与role.RoleId一致，示例为数字类型
vm.SelectedRoleId = 0; 
vm.LoadStoreAttributesDetails = function () { 
    alert("test"); 
}

原理说明 #

用ng-value之后，Angular会自动处理值的类型转换和同步，每当单选框选中状态变化，vm.SelectedRoleId就会被正确更新，进而触发ng-change绑定的方法。而原来的插值语法只是在页面初始化时把role.RoleId的值渲染成静态字符串，后续数据变化没法被Angular的双向绑定机制捕捉到。

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