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

【问题标题】：input return number instead string in AngularJS在AngularJS中输入返回数字而不是字符串
【发布时间】：2014-05-13 14:45:54
【问题描述】：

我有一个包含多个输入的表单。它工作正常，但是当我用数字0 填充输入时问题就来了。其他数字都不错。 1 被解释为 "1" 等。

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

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

结果：

 { 
   cible: 0
 }

改为：

 { 
   cible: "0"
 }

【问题讨论】：

检查此plunkr 无法重现您所说的内容
我不明白为什么它对你有用。我有相同的代码。我的结果发送：0 而不是"0"
你说的结果发送到底是什么意思？您能否提供更多详细信息/尝试在小提琴中复制相同的内容。

标签： javascript json angularjs input angularjs-scope

【解决方案1】：

默认情况下，输入标签中的所有值都是字符串。对于每个浏览器都是如此。如果要将值转换为 int，请使用 parseInt(value)。如果要将值转换为浮点数，请使用 parseFloat(value)。在您执行其中任何一项之前，您应该检查以确保它是一个数字。您的另一个选择是将输入的类型更改为数字。

【讨论】：

【解决方案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;
});

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

【讨论】：