AngularJS中option标签value属性返回字符串而非数字的问题求助

我来帮你搞定这个问题，这是AngularJS里select绑定常见的类型转换坑，咱们一步步来解决：

方案1：用ng-value替代value="{{rr.Id}}" #

你之前的问题出在value="{{rr.Id}}"——插值表达式会把数字rr.Id转换成字符串，所以ngModel绑定到的就是字符串类型。换成ng-value就能保持原始的数字类型，因为它直接绑定表达式的值，不是插值后的字符串。

修正后的select代码：

<select name="RefusedReason" id="RefusedReason" ng-model="rdpt.Items[$index].RewardPointItems.RefusedReasonID">
  <option ng-repeat="rr in vm.lstRefusedReason" ng-value="rr.Id">
    {{rr.Name}}
  </option>
</select>

注意几个细节：

• 把ng:repeat改成标准的ng-repeat（早期AngularJS支持冒号写法，但标准写法兼容性更好）；
• 确保ng-repeat里的数据源路径正确：如果你的控制器用了controllerAs vm（比如ng-controller="YourCtrl as vm"），必须写成rr in vm.lstRefusedReason，不然视图找不到数组，可能会出现你遇到的返回Name的异常情况。

方案2：更推荐的ng-options写法 #

AngularJS专门提供了ng-options指令来处理select的选项绑定，比用ng-repeat生成option更高效，还能自动维护数据类型，完全避免字符串/数字转换的问题：

<select name="RefusedReason" id="RefusedReason" 
        ng-model="rdpt.Items[$index].RewardPointItems.RefusedReasonID"
        ng-options="rr.Id as rr.Name for rr in vm.lstRefusedReason">
</select>

这里的语法rr.Id as rr.Name for rr in vm.lstRefusedReason意思是：

• 把每个rr.Id（数字类型）作为option的绑定值；
• 把rr.Name作为option显示的文本；
• 遍历vm.lstRefusedReason数组生成选项。

为什么你之前的尝试没生效？ #

• convert-to-number指令：如果不是自定义的正确指令，可能没起作用；而且ng-value本身就解决了类型问题，不需要额外指令。
• {{parseInt(rr.Id)}}：插值表达式里不能直接调用全局的parseInt（除非把它挂载到$scope或vm上），而且就算能调用，插值后还是会转成字符串，所以没用。
• 用ng-value返回Name：大概率是你写错了ng-value的表达式（比如写成了ng-value="rr.Name"），或者数据源路径错误导致数组没加载，出现了意外绑定。

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