Angular下拉框自动添加空选项且默认选中项无法初始化求助

核心问题 #

你遇到的空选项是因为数据类型不匹配：setting.value是数字类型（比如1），而<option>的value属性是字符串类型（"1"），AngularJS的ng-model做严格类型检查，找不到匹配项就自动生成了那个带? number:1 ?的空选项。

修复步骤 #

1. 统一数据类型：用ng-value代替value来绑定数字值，确保和setting.value的类型一致
2. 移除冲突指令：删掉ng-selected，因为ng-model会自动管理选中状态，两者共存会导致逻辑冲突
3. 移除jQuery手动操作：jQuery直接修改DOM会脱离Angular的消化周期，依赖双向绑定即可

修改后的下拉框代码 #

<select ng-change="updateSelect(setting.value,setting.setting_id,setting.name,setting.category_id)" 
        class="form-select form-control" 
        ng-model="setting.value" 
        id="{{setting.setting_id}}" 
        style="margin-top: 8px" 
        required>
    <option ng-value="0">No</option>
    <option ng-value="1">Yes</option>
</select>

额外说明 #

• 确保setting.value在页面渲染前已经被正确赋值（比如从后端获取数据后再初始化视图），如果是异步加载，可以用ng-if="setting.value !== undefined"来延迟渲染select，避免初始状态不匹配
• 删掉你写的$(document).ready里遍历设置select值的代码，Angular的双向绑定会自动同步数据和视图

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