AngularJS、ng 重复和默认选中的单选按钮

Question

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

<div ng-repeat="i in [1,2,3]">
    <input type="radio" name="radio{{i}}" id="radioA{{i}}" value="A" checked> A
    <input type="radio" name="radio{{i}}" id="radioB{{i}}" value="B"> B
</div>

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

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

Answer 1

这可能是因为当浏览器呈现单选按钮时(随着 ng-repeat 展开)，您所有的 radio 都具有相同的名称，即 "name="radio{{i}}" angular 还没有扩展它，因此所有的检查属性都没有正确应用。所以你需要使用 ng-attr-name 以便 angular 稍后添加扩展名称属性。所以尝试:-

<div ng-repeat="i in [1,2,3]">
    <input type="radio" ng-attr-name="radio{{i}}" ng-attr-id="radioA{{i}}" value="A" checked> A
    <input type="radio" ng-attr-name="radio{{i}}" ng-attr-id="radioB{{i}}" value="B"> B
</div>

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

<input type="radio" name="radio{{i}}" ng-attr-id="radioA{{i}}" 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="radio{{i}}" ng-attr-id="radioA{{i}}" value="A" checked> A
    <input type="radio" ng-attr-name="radio{{i}}" ng-attr-id="radioB{{i}}" value="B"> B
</div>
</div>