输入模型在更改时从 Integer 更改为 String答案

【问题标题】：Input model changes from Integer to String when changed输入模型在更改时从 Integer 更改为 String
【发布时间】：2013-02-10 21:39:43
【问题描述】：

具有一种基于输入模型的价格范围/评级功能。在加载时，当它从后端设置时，它以一个整数开始，但是当你输入它时，它会变成一个字符串。 Angular 中有什么方法可以将输入的值声明为整数？

HTML：

<input type="text" name="sellPrice" id="sellPrice" class="sell-price" data-ng-model="menu.totalPrice" data-ng-change="updateMenuPriceRange()"required>

JS：

$scope.updateAggregatePricing();

if ($scope.menu.totalPrice === 0) {
    $scope.menuPriceRange = "";
} else if ($scope.menu.totalPrice < 10) {
    $scope.menuPriceRange = "$";
} else if ($scope.menu.totalPrice >= 10 && $scope.menu.totalPrice <= 12.50) {
    $scope.menuPriceRange = "$$";
} else if ($scope.menu.totalPrice >= 12.51 && $scope.menu.totalPrice < 15) {
    $scope.menuPriceRange = "$$$";
} if ($scope.menu.totalPrice >= 15) {
    $scope.menuPriceRange = "$$$$";
} else {
    $scope.menuPriceRange = "";
}

【问题讨论】：

标签： javascript angularjs integer

【解决方案1】：

是的，使用 number 类型的输入：

<input type="number" name="sellPrice" ...>

【讨论】：

其实是小数，html5输入的数字好像也不管用。不过谢谢！
在 IE 9 中不起作用。模型值将被设置为 IE9 的字符串

【解决方案2】：

最终在我的条件之前将模型解析为整数。

$scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10);

【讨论】：

这是一个小数，所以 parseFloat($scope.menu.totalPrice) 是一个更好的解决方案
我同意！我认为 Yaniks 的解决方案非常有效。

【解决方案3】：

我知道我迟到了，但我想我会发布这个答案，因为其他人可能仍在寻找替代方案。

您可以通过使用 AngularJS 指令链接功能来解决这个问题。代码：

var myMod = angular.module('myModule', []);

myMod.directive('integer', function(){
    return {
        require: 'ngModel',
        link: function(scope, ele, attr, ctrl){
            ctrl.$parsers.unshift(function(viewValue){
                return parseInt(viewValue, 10);
            });
        }
    };
});

然后，您将在输入元素上使用此指令，以确保您输入的任何值都被解析为整数。 （很明显，这个例子没有验证输入以确保输入的内容实际上是一个整数，但您可以使用正则表达式轻松实现这一点）

<input type="text" ng-model="model.value" integer />

有关此主题的更多信息可以在表单上的 AngularJS 文档中找到，就在“自定义验证”部分附近：http://docs.angularjs.org/guide/forms。

编辑：更新了 parseInt() 调用以包含基数 10，如 adam0101 建议的那样

【讨论】：

谢谢！这有助于解决我遇到的一个问题，我有单选按钮，其值绑定到与输入相同的模型（类型=数字）。
啊哈！我知道必须有一种比我一直在做的更简单的方法来做到这一点。 :) 谢谢！
@SashaChedygov 没问题。 :)
您应该在 parseInt(viewValue, 10) 中包含 10 的基数，否则前导零可能会在某些浏览器实现中给出意外的值。
如果输入为空，给定的示例将 NaN 拉到模型中。也许这是期望的效果，但在大多数用例中，我希望模型中为 0。解决方案是here。

【解决方案4】：

与 Yanik 接受的答案非常相似，但我尝试过但没有奏效。不过，This version from the AngularJS documentation 非常适合我。

.directive('stringToNumber', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$parsers.push(function(value) {
            return '' + value;
          });
          ngModel.$formatters.push(function(value) {
            return parseFloat(value);
          });
        }
      };
    });

【讨论】：