web-dev-qa-db-ja.com

入力モデルが変更されると、整数から文字列に変更されます

入力モデルに基づく一種の価格帯/格付け機能を備えています。ロード時には、バックエンドから設定されると整数として始まりますが、入力すると文字列に変わります。 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 = "";
}
javascriptangularjsinteger
37
Christopher Marshall

私は遅れていることは知っていますが、他の人がまだ代替を探しているかもしれないので、この答えを投稿すると思いました。

これを解決するには、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 。

Edit：adam0101が示唆するように、parseInt()呼び出しを基数10を含むように更新

85
Yanik Ceulemans

はい、タイプnumberの入力を使用します。

<input type="number" name="sellPrice" ...>
23
pkozlowski.opensource

私の条件の前に整数としてモデルを解析することになりました。

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

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