ng-value与ng-model不兼容问题：如何同时使用实现数据绑定？

我之前也碰到过类似的坑，咱们先拆解问题根源，再给你两种靠谱的解决方案：

问题出在哪？ #

你在<option>里写ng-value="{{p.id_tipo}}"时用了插值表达式{{}}，这是错误的用法。ng-value本身就是用来绑定Angular表达式的，不需要额外套插值——加了插值会把p.id_tipo的原始值（比如数字）转成字符串，很可能和ng-model绑定的plan.tipo_plan类型不匹配，直接导致绑定失效。

方案1：修复ng-repeat+ng-value的写法 #

只需要去掉ng-value里的插值，直接绑定表达式就行：

<select next-focus tabindex="0" ng-model="plan.tipo_plan" class="input-sm select-control">
  <option ng-repeat="p in planes" ng-value="p.id_tipo">{{p.tipo_plan}}</option>
</select>

修改后，ng-value会正确把p.id_tipo的原始值绑定到选项，ng-model就能正常获取和更新选中的值了。

方案2：改用ng-options（更推荐） #

在AngularJS里，下拉选框的选项生成更推荐用ng-options而非ng-repeat，因为ng-options是专门为下拉场景设计的，处理初始值匹配、类型一致性等问题更可靠，代码也更简洁：

<select next-focus tabindex="0" ng-model="plan.tipo_plan" class="input-sm select-control"
        ng-options="p.id_tipo as p.tipo_plan for p in planes">
</select>

这里的语法p.id_tipo as p.tipo_plan for p in planes意思是：把p.id_tipo作为选项的绑定值（对应之前的ng-value），把p.tipo_plan作为选项显示的文本。

如果需要自定义选项的复杂模板（比如加图标、额外文字）可以选方案1，否则方案2更省心。

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