输入模型在更改时从整数更改为字符串 [英] Input model changes from Integer to String when changed

问题描述

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

Have a kind of price range/rating functionality based on an inputs model. On load, when it's set from the backend, it starts off as an integer, but when you type in it, it changes to a string. Is there any way in Angular to declare the value of an input as integer?

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 = "";
}

推荐答案

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

I know I'm late but I figured I'd post this answer as other people might still be searching for alternatives.

您可以通过使用 AngularJS 指令链接函数来解决这个问题.代码:

You could solve this by using the AngularJS directive linking function. The code:

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);
            });
        }
    };
});

然后您将在输入元素上使用此指令以确保您输入的任何值都被解析为整数.(显然这个例子没有验证输入以确保输入的内容实际上是一个整数，但是你可以很容易地使用正则表达式来实现)

You would then use this directive on an input element to make sure that any value you enter, gets parsed to an integer. (obviously this example doesn't validate the input to make sure that what was entered is in fact an integer, but you could easily implement this with the use of regular expressions for example)

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

关于这个主题的更多信息可以在 AngularJS 的表单文档中找到，就在自定义验证"部分:http://docs.angularjs.org/guide/forms .

More information about this topic can be found on the AngularJS docs on forms, right around the section of "Custom validation": http://docs.angularjs.org/guide/forms .

更新了 parseInt() 调用以包含基数 10，如 adam0101 所建议的

Updated parseInt() call to include the radix 10, as suggested by adam0101

这篇关于输入模型在更改时从整数更改为字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！