input模型在更改时从整数更改为string

有一种基于input模型的价格范围/评级function。 在加载时,当它从后端设置时,它以一个整数开始,但是当你键入它时,它将变成一个string。 Angular有没有什么方法将input的值声明为整数?

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

3 Solutions collect form web for “input模型在更改时从整数更改为string”

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

你可以通过使用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元素上使用此伪指令,以确保input的任何值都被parsing为一个整数。 (显然这个例子没有validationinput,以确保input的内容实际上是一个整数,但是你可以很容易地使用正则expression式来实现这个例子)

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

有关这个主题的更多信息可以在AngularJS文档的窗体上find,就在“自定义validation”部分: http : //docs.angularjs.org/guide/forms 。

编辑:更新parseInt()调用包含基数10,如adam0101build议

是的,使用typesnumberinput:

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

在我的条件之前,以整数parsing模型。

 $scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10); 
  • 我如何testingangular度的事件?
  • 如何在AngularJS中unit testing隔离的范围指令
  • 数组包含的angular度expression式
  • 在Angular控制器中使用下划线
  • 在Karma + AngularJStesting中加载一个模拟的JSON文件
  • AngularJS:为什么ng-bind在angular度上比{{}}好?
  • 如何在AngularJS中停止收看$?
  • AngularJS:ngInclude vs指令
  • 有条件地在Angular指令模板中添加数据属性
  • unit testing有依赖关系的AngularJS工厂
  • 使用pdf从HTML生成PDF在Angularjs中制作