AngularJS中ng-repeat生成单选框的条件选中问题求助

看起来你需要根据配送方式列表动态设置默认选中项，当前硬编码初始化的方式没法兼顾两种场景，我来帮你调整一下代码：

问题根源 #

你现在直接把SelectedShippingMethod设为"Express"，当列表里没有这个选项时，AngularJS找不到匹配的单选框，就不会选中任何项；而有Express的时候虽然能选中，但没法默认选第一个选项。所以需要动态判断列表内容来设置默认值。

解决方案 #

1. 控制器里添加动态设置默认值的逻辑 #

在你的控制器中，添加一段逻辑，在配送方式数据加载完成后，检查是否存在Express选项，存在则选中它，否则选中第一个选项：

// 封装设置默认选中项的函数
function setDefaultShipping() {
  const shippingMethods = $scope.itemGroup.ShippingMethods;
  if (!shippingMethods || shippingMethods.length === 0) return;

  // 查找是否有Express选项
  const expressOption = shippingMethods.find(method => method.Name === "Express");
  if (expressOption) {
    $scope.itemGroup.SelectedShippingMethod = expressOption.Name;
  } else {
    // 没有的话选第一个
    $scope.itemGroup.SelectedShippingMethod = shippingMethods[0].Name;
  }
}

// 监听配送方式列表的变化，确保数据加载完成后执行默认设置
$scope.$watch('itemGroup.ShippingMethods', function(newMethods) {
  if (newMethods && newMethods.length > 0) {
    setDefaultShipping();
  }
}, true); // 深度监听数组内容变化

2. 修正HTML中的单选框绑定 #

你的HTML里有两个小问题需要调整：

• value="method.Name"是静态字符串，不是绑定变量，要用ng-value才能正确绑定method.Name的值
• 每个单选框的id要唯一，避免重复，同时和label关联提升可访问性

调整后的HTML代码：

<li ng-repeat="method in itemGroup.ShippingMethods track by method.Name"> 
  <input 
    ng-model="itemGroup.SelectedShippingMethod" 
    ng-change="changeShipping(itemGroupKey, itemGroup.SelectedShippingMethod)" 
    type="radio" 
    name="Shipping" 
    id="shipping-method-{{method.Name}}" 
    ng-value="method.Name" 
  />
  <label for="shipping-method-{{method.Name}}">{{method.Name}}</label>
</li>

关键说明 #

• ng-value：确保单选框的值和method.Name的实际值绑定，而不是字符串"method.Name"
• track by method.Name：避免ng-repeat因为重复数据报错（假设每个配送方式名称唯一）
• $watch监听：确保在异步加载配送方式数据后，依然能正确设置默认选中项，不会因为数据还没加载完就执行初始化逻辑而失效

这样调整后，当列表是[Standard, Fast, Speedy]时会自动选中Standard；列表包含Express时会选中Express，完全符合你的需求。

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