ng-model 防止checked="checked" 默认选择单选按钮

Posted 2023-02-22

【中文标题】ng-model 防止checked="checked" 默认选择单选按钮

【英文标题】：ng-model preventing checked="checked" to select radio button by default

【发布时间】：2013-10-01 13:18:53

【问题描述】：

当我使用 checked="checked" ng-model 时，默认情况下会阻止单选按钮被选中。有谁知道是什么原因造成的？

<input type="radio" name="unitMiles" checked="checked" id="unitMiles" value="Miles" ng-model="unit" ng-change='nextActivityStep(3)'>

【问题讨论】：

你试过用ngChecked -- docs.angularjs.org/api/ng.directive:ngChecked

@tymeJV - 将其作为答案。没错。

【参考方案1】：

您应该使用 Angular 附带的 ngChecked 指令。

文档：http://docs.angularjs.org/api/ng.directive:ngChecked

【讨论】：

这可能在发布后的两年内发生了变化，但通常不应该在同一个元素上使用 ngChecked 和 ngModel。您现在有两个指令在争夺元素值的控制权。文档还建议不要这样做（请参阅答案中的链接）：“请注意，此指令不应与 ngModel 一起使用，因为这可能导致意外行为。”

【参考方案2】：

您可以将模型设置为输入的值（在这种情况下为$scope.unit = "Miles"）或在输入中使用ng-checked="true"。

【参考方案3】：

正如我评论接受的答案（截至撰写时），不应在同一元素上使用 ngChecked 和 ngModel 指令。

如果您使用的是 ngModel，那么输入的检查状态只是模型的反映。要将您的无线电输入默认设置为 true，只需相应地设置模型即可。

使用来自 OP 的代码，其中值是 'miles'，模型是 units，并假设这些是范围变量，您可以在关联的控制器（或任何地方）中按照 $scope.units = 'miles' )。