AngularJS中ng-repeat内单选按钮出现异常行为问题

你这个问题的核心原因很明确：所有循环生成的单选按钮共用了同一个name属性。在HTML规则里，同名的单选按钮会被视为同一组，同一组内只能有一个按钮处于选中状态。所以当ng-repeat循环渲染时，前面项的ng-checked会被后面项的设置覆盖，最终只有最后一项的默认选中能生效。

下面给你两种解决思路，推荐第一种更符合AngularJS设计的方案：

方案一：用ng-model绑定+唯一name（推荐） #

ng-checked更多是单向绑定，适合静态场景；而ng-model是双向绑定，更适配动态循环里的表单控件状态管理。同时我们要给每个商品的单选按钮组设置唯一的name，避免跨组干扰。

修改后的代码示例：

<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
  <div class="radio-box">
    <!-- 结合product.product_id生成唯一name，确保每组单选按钮独立 -->
    <input type="radio" 
           name="send_num_{{product.product_id}}" 
           ng-model="product.selectedNumType" 
           value="basic"> NumType A
    <input type="radio" 
           name="send_num_{{product.product_id}}" 
           ng-model="product.selectedNumType" 
           value="advanced"> NumType B
  </div>
</div>

配套逻辑： #

在你的数据源初始化时，给每个product对象设置默认选中值即可：

// 假设这是你的cartProducts数组初始化逻辑
$scope.cartProducts = [
  { product_id: 1, selectedNumType: 'basic', ... }, // 默认选NumType A
  { product_id: 2, selectedNumType: 'basic', ... },
  // ...其他商品
];

这样AngularJS会自动根据product.selectedNumType的值匹配对应的单选按钮，实现默认选中，完全不需要手动用ng-click去修改状态。

方案二：保留ng-checked但设置唯一name #

如果你坚持要用ng-checked，必须先给每组单选按钮设置唯一name，同时调整ng-click的逻辑：

<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
  <div class="radio-box">
    <input type="radio" 
           name="send_num_{{product.product_id}}" 
           ng-checked="product.isBasicNum" 
           ng-click="setNumType(product, true)"> NumType A
    <input type="radio" 
           name="send_num_{{product.product_id}}" 
           ng-checked="!product.isBasicNum" 
           ng-click="setNumType(product, false)"> NumType B
  </div>
</div>

然后在控制器里添加对应的方法：

$scope.setNumType = function(product, isBasic) {
  product.isBasicNum = isBasic;
};

这种方式虽然能解决问题，但相比ng-model要多写不少手动状态管理的代码，所以还是优先推荐方案一。

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