在AngularJS中输入返回数字而不是字符串

Question

我有一个包含多个输入的表单。它工作正常但问题来自我用数字0填充输入。其他数字都很好。 1被解释为"1"等。

唯一的问题是0。 我想强制值为字符串，即使它是0。

 <input type="text" ng-model="project.cible" required />

结果：

 { 
   cible: 0
 }

相反：

 { 
   cible: "0"
 }

Answer 1

默认情况下，输入标记中的所有值都是字符串。这适用于每个浏览器。如果要将值转换为int，请使用parseInt（value）。如果要将值转换为float，请使用parseFloat（value）。在你做其中任何一个之前，你应该检查以确定它是一个数字。您的另一个选择是将输入的类型更改为数字。

Answer 2

如果从数据建模的角度来看，我认为将模型值保持为数字而不是字符串是最好的。这样你就可以更容易地进行总结，比较等，即使你没有足够的控制来编写javascript转换代码，比如表达式：

<div ng-show="project.cible + project.someOtherNum > 0">I'm visible</div>

这可以通过将输入类型更改为type="number"来完成。对于这种情况，Angular有special directive，其中（除其他外）在关联的ngModelController中添加了解析器/格式化程序：

ctrl.$parsers.push(function(value) {
    var empty = ctrl.$isEmpty(value);
    if (empty || NUMBER_REGEXP.test(value)) {
        ctrl.$setValidity('number', true);
        return value === '' ? null : (empty ? value : parseFloat(value));
    } else {
        ctrl.$setValidity('number', false);
        return undefined;
    }
});

ctrl.$formatters.push(function(value) {
    return ctrl.$isEmpty(value) ? '' : '' + value;
});

在更新模型属性之前，有效输入将转换为float，并且在更新DOM元素之前，模型属性将转换为字符串。