AngularJS、ngRepeat 和默认选中单选按钮

Posted 2023-03-05

【中文标题】AngularJS、ngRepeat 和默认选中单选按钮

【英文标题】：AngularJS, ngRepeat, and default checked radio button

【发布时间】：2015-02-17 13:01:59

【问题描述】：

使用 ngRepeat 时，可以使用以下代码创建 3 对单选按钮：

<div ng-repeat="i in [1,2,3]">
    <input type="radio" name="radioi" id="radioAi" value="A" checked> A
    <input type="radio" name="radioi" id="radioBi" value="B"> B
</div>

由于某种原因，只有最后一对由 ngRepeat 生成的单选按钮受checked 属性的影响。

这是因为 AngularJS 更新视图的方式吗？有办法解决吗？

【参考方案1】：

这可能是因为当浏览器呈现单选按钮时（随着 ng-repeat 扩展），所有单选按钮都具有相同的名称，即 "name="radioi" angular 尚未扩展它，因此选中的属性未在所有单选按钮中正确应用。因此，您需要使用 ng-attr-name 以便 Angular 稍后添加扩展名称属性。所以试试：-

<div ng-repeat="i in [1,2,3]">
    <input type="radio" ng-attr-name="radioi" ng-attr-id="radioAi" value="A" checked> A
    <input type="radio" ng-attr-name="radioi" ng-attr-id="radioBi" value="B"> B
</div>

或使用ng-checked="true"，以便在 ng-checked 指令扩展时应用检查属性。即示例

<input type="radio" name="radioi" ng-attr-id="radioAi" value="A" ng-checked="true"> A

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>

  
  <div ng-repeat="i in [1,2,3]">
    <input type="radio" ng-attr-name="radioi" ng-attr-id="radioAi" value="A" checked> A
    <input type="radio" ng-attr-name="radioi" ng-attr-id="radioBi" value="B"> B
</div>
</div>

【讨论】：

谢谢！还应该注意的是，对于单选按钮和其他情况，如果您使用的是 ngModel，则不要使用 checked 或 ngChecked 属性。组中的每个单选按钮都应具有相同的 ngModel，其中包含应检查的单选按钮的值。

@user3071284 是的，您的代码中没有 ng-model .. :)

是的，这两种情况都需要某些属性才能正确运行。您的解决方案解决了我遇到的一种情况，并且从那里，我能够解决另一种情况。再次感谢！

【参考方案2】：

这里milestone_data.index ==选择的猫id；

 <div  ng-repeat="category in catData.categories" > 
 <input type="radio" name="quality" id="category.title" ng-value="category.id" ng-model="milestone_data.index" >
  <span>category.title</span> 
 </div>