AngularJS使用ng-repeat实现下拉框预填及REST API数据填充异常

现存问题说明 #

• 业务诉求：保留现有基于ng-repeat渲染select下拉选项的代码实现，不强制替换为ng-options方案，同时支持通过REST API拉取选项数据、预填默认选中值
• 异常表现：相同代码在部分页面可正常运行，在当前页面渲染时，select元素内会被自动注入格式异常的空占位option：<option value="? string:value ?" selected="selected"></option>，原有自定义选项无法正常匹配选中状态
• 参考代码片段：

<select id="subject" name="subject" class="form-control required" ng-model="ToDoProp.BMW">
    <option value="">Choose One:</option>
    <option value="{{item.Title}}" ng-repeat="item in bmwProp | orderBy:'Title' track by $index"> {{item.Title}}</option>
</select>

异常根因 #

该问题本质是AngularJS对select元素的固有绑定逻辑触发：当select通过ng-model绑定的值，和当前DOM中所有已存在的option的value值没有完成精确字符串匹配时，AngularJS会自动插入一个value格式为? string:xxx ?的空option，用来标记当前模型值没有可匹配选项的状态。
不同页面运行效果不一致的常见诱因：

• 作用域初始化差异：当前页面中ToDoProp.BMW的初始值未显式定义，处于undefined状态，触发AngularJS的占位option插入逻辑
• 数据加载时序差异：当前页面的bmwProp列表由异步REST API返回，首轮渲染时数组为空，没有任何option可匹配模型值，直接触发占位逻辑；后续数组加载完成后，AngularJS不会自动清除已插入的异常占位项
• 字符串匹配偏差：预填的ToDoProp.BMW值与item.Title存在隐性差异（比如首尾空格、大小写不一致、特殊字符未转义），导致精确匹配失败

保留ng-repeat实现的修复方案 #

• 调整模型初始值：在控制器初始化阶段，显式将ToDoProp.BMW初始化为空字符串""，避免因值为undefined触发异常占位逻辑
• 优化option值绑定方式：将原代码中插值语法绑定的value="{{item.Title}}"替换为ng-value="item.Title"，消除插值渲染延迟导致的匹配失效问题，修改后的option代码为：

<option 
  ng-value="item.Title" 
  ng-repeat="item in bmwProp | orderBy:'Title' track by $index"
> 
  {{item.Title}}
</option>

• 适配异步加载逻辑：当REST API返回bmwProp列表数据后，显式校验预填值与列表项的匹配关系，确保模型值能对应到已存在的option项，不依赖AngularJS的自动匹配行为
• 快速兼容补全：可以在select标签上追加初始化逻辑，绑定模型的空值兜底规则，避免首轮渲染时触发异常占位：

<select 
  id="subject" 
  name="subject" 
  class="form-control required" 
  ng-model="ToDoProp.BMW"
  ng-init="ToDoProp.BMW = ToDoProp.BMW || ''"
>

内容的提问来源于stack exchange，提问作者neha gharpure