AngularJS中ng-model绑定select始终选中首个<option>的问题

这个问题我太熟悉啦！你遇到的是AngularJS里ng-repeat生成<option>时常见的类型不匹配问题，我来帮你拆解原因和解决方案：

问题根源 #

你在JS代码里给$scope.form.language_id赋值的是数字类型的2，但通过value="{{value.id}}"生成的<option>的value属性会被转换为字符串类型的"2"。AngularJS的ng-model做匹配时是严格比较数据类型的，数字和字符串不相等，所以它找不到对应的选项，只能默认选中第一个。

解决方案（两种任选其一） #

方案1：用ng-value替代value

ng-value会保留原始的数据类型，不会把数字转成字符串，完美解决类型不匹配问题：

<div class="form-group row" > 
  <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label> 
  <div class="col-sm-10"> 
    <select class="form-control" id="language_id" ng-model="form.language_id" name="language_id" required > 
      <!-- 把value换成ng-value，直接绑定value.id的原始类型 -->
      <option ng-repeat="(key,value) in langs" ng-value="value.id">{{value.languageTitle}}</option> 
    </select> 
  </div> 
</div>

方案2：使用AngularJS推荐的ng-options指令

ng-options是专门为<select>设计的指令，比ng-repeat更简洁，也能从根源避免类型问题：

<div class="form-group row" > 
  <label class="col-sm-2 text-right control-label col-form-label">{{phrase.Language}}</label> 
  <div class="col-sm-10"> 
    <select class="form-control" id="language_id" ng-model="form.language_id" name="language_id" required 
            ng-options="lang.id as lang.languageTitle for lang in langs">
    </select> 
  </div> 
</div>

这里lang.id as lang.languageTitle for lang in langs的含义是：将每个语言项的id作为绑定值，languageTitle作为显示文本。

只要你的langs数据中存在id=2的项，用上面任意一种方法都能让下拉框默认选中对应的选项。

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