37

具有一种基于输入模型的价格范围/评级功能。在加载时，当它从后端设置时，它以一个整数开始，但是当你输入它时，它会变成一个字符串。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 = "";
}
4

4 回答 4

85

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

你可以通过使用 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()按照 adam0101 的建议，更新了包含基数 10 的调用

于 2013-04-24T08:31:39.743 回答
23

是的，使用输入类型number：

<input type="number" name="sellPrice" ...>
于 2013-02-25T17:06:32.087 回答
8

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

$scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10);
于 2013-02-25T17:15:12.633 回答
0

与 Yanik 接受的答案非常相似，除了我尝试过但没有用。不过，AngularJS 文档中的这个版本对我来说非常适合。

.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);
          });
        }
      };
    });
于 2017-12-01T18:34:29.247 回答