AngularJS 未绑定到选择列表中的数值

AngularJS not binding to numeric value in select list

本文关键字：列表 选择 绑定 AngularJS      更新时间：2023-09-26

我有一个现有的选择标签和现有的选项标签，一个标记为"selected"，例如：

<div class="form-group">
  <label class="control-label">Test</label>
  <select ng-model="vm.testNumber">
    <option>Choose...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3" selected>three</option>
  </select>
  <p class="help-block">{{vm.testNumber}}</p>
</div>

Angular 正确绑定到模型，并在页面加载时在帮助块中吐出"3"，但未选择选项 3。如果我在每个选项的值属性中使用文本，它会绑定并将 3 显示为选中状态，但当它是数值时则不会。相反，它会在选择列表的顶部插入一个选项：

<option value="? number:3 ?"></option>

我做错了什么？

来自Angular DOC

请注意，不使用 ngOptions 的 select 指令的值始终是字符串。当模型需要绑定到非字符串值时，必须显式转换它或使用 ngOptions 指定选项集。这是因为选项元素目前只能绑定到字符串值。

如果按以下代码片段更改代码，则无需执行任何显式字符串转换。

 <select ng-model="vm.testNumber" ng-options="item.value as item.label for item in [{label: 'one', value: 1}, {label: 'two', value: 2}]">
    <option value="">Choose...</option>
  </select>

事实证明，您需要添加一个指令才能使其正常工作。 @codeninja.sj 的答案最终将"一"替换为 1，将"二"替换为 2，依此类推。在文档中，最后一个示例具有此指令，convert-to-number 

angular.module('app').directive('convertToNumber', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function (val) {
            return parseInt(val, 10);
        });
        ngModel.$formatters.push(function (val) {
            return '' + val;
        });
    }
};
});

文档中的其他示例都不适合我。

更新@codeninja.sj 的更新答案确实有效，但是，要知道这个指令会减少我的代码中的魔术字符串。

相关文章：