整数到字符串输入模式发生变化时改变 [英] Input model changes from Integer to String when changed

问题描述

有基于一个输入模型的一种价格范围/等级功能。在负荷，当它从后端设置，它开始了作为一个整数，但是当你键入它，它改变为一个字符串。是否有任何角度的方式来声明一个输入作为整数？

价值

HTML

 ＆LT;输入类型=文本名称=sellPriceID =sellPrice级=卖出价的数据-NG-模式=menu.totalPrice数据 - NG-变化=updateMenuPriceRange（）要求＆GT;
 

JS：

  $ scope.updateAggregatePricing（）;如果（$ scope.menu.totalPrice === 0）{
    $ scope.menuPriceRange =;
}否则如果（$ scope.menu.totalPrice小于10）{
    $ scope.menuPriceRange =$;
}否则如果（$ scope.menu.totalPrice＆GT; = 10安培;＆安培; $ scope.menu.totalPrice＆LT; = 12.50）{
    $ scope.menuPriceRange =$$;
}否则如果（$ scope.menu.totalPrice＆GT; = 12.51和放大器;＆安培; $ scope.menu.totalPrice＆LT; 15）{
    $ scope.menuPriceRange =$$$;
}如果（$ scope.menu.totalPrice＆GT; = 15）{
    $ scope.menuPriceRange =$$$$;
}其他{
    $ scope.menuPriceRange =;
}
 

解决方案

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

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

  VAR myMod = angular.module（'Mymodule中'，[]）;myMod.directive（'整'，函数（）{
    返回{
        要求：'ngModel'，
        链接：功能（范围，ELE，ATTR，CTRL）{
            Ctrl键。$ parsers.unshift（功能（viewValue）{
                返回parseInt函数（viewValue，10）;
            }）;
        }
    };
}）;
 

您会再使用一个input元素此指令，以确保您所输入的任何值，被解析为整数。的（显然，这个例子不验证输入，以确保什么进入实际上是一个整数，但你可以很容易地使用常规的前pressions的例如实现这个）的

 ＆LT;输入类型=文本NG模型=model.value整数/＆GT;
 

有关此主题的更多信息，请上形成AngularJS文档中找到，对各地自定义验证一节： HTTP： //docs.angularjs.org/guide/forms 。

编辑：更新 parseInt函数（）调用包括基数10，由adam0101的建议

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.

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

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 .

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

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