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

はい、 type の入力を使用します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 に答える