如何在ng-repeat中使用select并根据API返回数据保留选中值

我看了你的代码，问题主要出在三个地方：大小写不匹配、ng-model作用域问题，以及select选项的绑定方式不够合理，下面一步步给你说清楚并修复：

1. 核心问题：大小写不匹配导致选中状态失效 #

你的trip.type是小写值（比如'confirmed'），但tripTypes里的选项是首字母大写的'Confirmed'，所以ng-selected="trip.type === t"这个判断永远不成立，自然选不中对应选项。

2. ng-model作用域问题 #

你在ng-repeat里用了全局的selectedType作为ng-model，这会导致所有循环出来的select共用同一个模型值——改其中一个，其他的也会跟着变。正确的做法应该把模型绑定到当前trip对象的属性上，比如trip.selectedType或者直接复用trip.type（需要先统一大小写）。

3. 推荐用ng-options替代ng-repeat生成option #

AngularJS里处理select选项，官方更推荐用ng-options，它比手动用ng-repeat生成option更简洁，也能避免一些作用域相关的小问题。

修复后的完整代码 #

HTML部分

<div ng-repeat="trip in trips">
  原类型: {{trip.type}}
  <select 
    ng-change="typeChanged(trip.selectedType, trip.id)" 
    ng-model="trip.selectedType"
    ng-options="t as t for t in tripTypes">
  </select>
</div>

JS部分

$scope.trips = [
  {id:1, type:'confirmed', selectedType: ''},
  {id:2, type:'cancelled', selectedType: ''}
];
$scope.tripTypes = ['Confirmed','Quotation'];

// 初始化时根据原始trip.type自动映射匹配的选中值
angular.forEach($scope.trips, function(trip) {
  // 把小写的type转成首字母大写，匹配tripTypes里的选项格式
  var mappedType = trip.type.charAt(0).toUpperCase() + trip.type.slice(1);
  // 如果映射后的值在选项列表中，就设置为默认选中值
  if ($scope.tripTypes.includes(mappedType)) {
    trip.selectedType = mappedType;
  }
});

$scope.typeChanged = function(selectedVal, tripId) {
  // 这里可以处理选中变化后的业务逻辑
  console.log('选中类型:', selectedVal, '对应行程ID:', tripId);
};

关键修改说明 #

• 把ng-model绑定到trip.selectedType，每个行程拥有独立的选中状态，不会互相干扰。
• 用ng-options="t as t for t in tripTypes"替代ng-repeat生成选项，语法更简洁且符合AngularJS最佳实践。
• 新增初始化逻辑，自动把原始小写的trip.type转换成和选项匹配的格式，实现默认选中对应值。
• 保留ng-change逻辑，确保选中状态变化时能触发对应的处理函数。

内容的提问来源于stack exchange，提问作者Sudarshan Kalebere