Изменяется модель ввода от Integer до String при изменении

Имейте своего рода ценовой диапазон/рейтинговую функциональность, основанную на модели ввода. При загрузке, когда он устанавливается из бэкэнд, он начинается как целое, но когда вы вводите его, он изменяется на строку. Есть ли способ в 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 = "";
}

Ответ 1

Я знаю, что опаздываю, но я решил, что опубликую этот ответ, поскольку другие люди все еще могут искать альтернативы.

Вы можете решить это, используя функцию привязки директивы 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(), чтобы включить radix 10, как было предложено adam0101

Ответ 2

Да, используйте ввод типа number:

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

Ответ 3

Закончился синтаксический анализ модели как целого числа до моего условного.

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

Ответ 4

Очень похоже на принятый ответ от Яника, за исключением того, что я пробовал это, и это не сработало. Эта версия документации 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);
          });
        }
      };
    });