AngularJS中ng-repeat渲染下拉框异常问题咨询

问题根源分析 #

• 变量名冲突：你将ng-model绑定到了数组变量red上，当选择选项时，AngularJS会把red从数组覆盖成选中的字符串值，导致再次渲染下拉框时，循环的是字符串的每个字符，因此出现s,t,a,n,d,a,r,d这种拆分后的选项。
• 选项绑定错误：<option>里用[[red]]绑定的是整个数组，而非循环变量r，首次显示看似正常，但本质是错误绑定，后续变量被覆盖后问题就会显现。

修复方案 #

方案1：修正ng-repeat写法（避免变量冲突+正确绑定循环项）

把ng-model的变量名改成与数组不同的名称（比如selectedRed），同时选项内容绑定循环变量r：

<select id="red" ng-model="selectedRed" class="form-select">
    <option ng-repeat="r in red" value="[[r]]">[[r]]</option>
</select>

方案2：使用AngularJS推荐的ng-options（更规范）

AngularJS的select控件更推荐用ng-options生成选项，写法简洁且无需手动处理value绑定：

<select id="red" ng-model="selectedRed" class="form-select" ng-options="r for r in red"></select>

这种方式会自动处理选项值与显示内容，同时从根源避免变量冲突问题。

关键注意点 #

• 绝对不要让ng-model和循环的数据源变量同名，否则会覆盖原始数据引发异常。
• 用ng-repeat生成下拉选项时，必须绑定循环变量（比如示例中的r），而非数据源本身。

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