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

我有一个带有现有选项标记的现有选择标记，其中一个标记为“已选择”，例如：

<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>

试验
选择。。。
一
二
三
{{vm.testNumber}

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

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

我做错了什么？

从角度看

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

如果您像下面的代码片段那样更改代码，则不需要进行任何显式字符串转换

 <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>

选择。。。

从角度

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

如果您像下面的代码片段那样更改代码，则不需要进行任何显式字符串转换

 <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>

选择。。。

结果表明，您需要添加一个指令才能使其正常工作@sj的答案最终将“1”替换为1，“2”替换为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;
        });
    }
};
});

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

---

更新@codenninja.sj的更新答案确实有效，但是，我认为此指令将减少代码中的魔法字符串。

结果表明，您需要添加一个指令才能正确执行此操作@sj的答案最终将“1”替换为1，“2”替换为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;
        });
    }
};
});

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

---

更新@codenninja.sj的更新答案确实有效，但是，我认为此指令将减少我代码中的魔法字符串。

抱歉，昨晚有点晚，没有发现此示例将选项中的“1”替换为“1”，将“2”替换为“2”text@MichaelTranchida，更新了解决方案，希望对SOK有所帮助，这正是我所期望的。非常感谢。我想我会坚持回答中的指令，这样我就不必担心（那么多）代码中的神奇字符串。对不起，昨晚有点晚了，没有注意到这个示例将选项中的“1”替换为“1”，将“2”替换为“2”text@MichaelTranchida，更新了解决方案，希望它能帮助Sok，正如我所期望的那样。非常感谢。我想我会坚持回答中的指令，这样我就不必担心代码中的神奇字符串了。